Sections and blocks
Use sections and blocks for different types of elements on the page depending on your markup. They are used for managing the bottom space after each element.
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.
Sections should not be nested inside each other or inside the strips.
Do:
Don't:
Blocks
Use a block component (.p-block
) to group larger chunks of content inside a single section or strip.
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-container;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.