Section

Use section components to wrap around parts of content on the page. They are used for managing the bottom space after each element.

Hero sections

Use a hero section component (.p-section--hero) to create a hero section with top padding to be placed at the top of the page.

For more information on specific layouts and variants of hero section pattern, see the full hero pattern documentation.

Regular sections

Use a section component (.p-section) for displaying subsequent sections on the page on a same background. They should be used in place of strips for most of the standard page content.

Shallow sections

Use a shallow section component (.p-section--shallow) to group larger chunks of content inside a single section or strip or to add a shallow spacing to a heading.

Deprecated

The block component .p-block previously served the same purpose, but is now deprecated and should not be used any more. Use the shallow section component instead.

Deep sections

In cases when a section needs a deep spacing below it (for example at the bottom of the page), use a deep section component (.p-section--deep).

Please not that to emphasize the sections of the page with both top and bottom spacing, a strip component should be used instead.

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-p-section;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.