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.

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.