Use section components to wrap around parts of content on the page. They are used for managing the bottom space after each element.
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.
Do:
Don't:
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.
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.
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.