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.
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).
.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
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:
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
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