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: Use section component to build regular sections of the page that follow each other on the same background.

Don't: If a section of a page has a different background, or needs to be emphasised using deeper spacing use the strip component instead.

View example of the "section" pattern

Blocks

Use a block component (.p-block) to group larger chunks of content inside a single section or strip.

View example of the "block" pattern

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.