The strip pattern provides a full width strip container in which to wrap a grid. It is an alternative to the section component, that surrounds its content with a padding both on the top and bottom, and is used usually when a change of the background is needed or to separate different sections of the page.
Strips, similarly to sections, come in 3 sizes: regular (.p-strip), deep (.p-strip is-deep) and shallow (.p-strip is-shallow).
They fully support theming. Changing the theme on the strip component itself will apply the background colour to the entire strip, and affect the theme of the strip content. You can choose between regular strip (with default background of the theme), or highlighted strip (with am alternative lighter version of the background colour).
A .p-strip container should always be the parent of a .row (from the Grid pattern) and never the other way around.
The strip component is rarely used on its own as a container with just .p-strip class name. It is usually combined with other variants described below to provide a specific visual style.
If you believe you need a plain .p-strip container, you likely want to use a section instead.
The strip component can be used to change the background colour of the section, by applying one of the theme class names, such as is-dark, is-light or is-paper.
New
The purpose of the highlighted strip (.p-strip--highlighted) is to display content with a lighter version of the background colour based on the current theme.
This state gives the strip larger vertical padding.
This state gives the strip smaller vertical padding.
The following strip variants are now deprecated and should not be used on any new pages:
Instead of deprecated Suru strip (.p-strip--suru) and topped Suru strip (.p-strip--suru-topped) use the new Suru component instead.
Strips with arbitrary image backgrounds (.p-strip--image) are now also deprecated. For a hero section with a background use the new Suru component instead.
Bordered strip (.p-strip--bordered) is now deprecated. If a horizontal line is needed to separate parts of content use standard sections and the rule component instead.
Light strips (.p-strip--light), white strips (.p-strip--white) and accent strips (.p-strip--accent) are now deprecated. Use the new highlighted strip instead.
Dark strip (.p-strip--dark) is now deprecated. Use the new theming by applying is-dark class name to the strip instead.
Legacy documentation of the deprecated strip variants is available for reference until they are removed in the next major release of Vanilla.
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-strip;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
You can use strip in React by installing our react-component library and importing Strip component.