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.
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.
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 (
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.