Jump to main content

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.

Regular strip

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.

Themes

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.

Deprecated

In Vanilla 4.8.0 with the introduction of new theming system the old p-strip--dark is deprecated. Use a strip with is-dark class instead.

Highlighted strip

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.

Deprecated

In Vanilla 4.8.0 with the introduction of new theming system and highlighted strip, the old p-strip--light, p-strip--accent are deprecated. Use a highlighted strip p-strip--highlighted instead.

Deep strip

This state gives the strip larger vertical padding.

Shallow strip

This state gives the strip smaller vertical padding.

Deprecated

Deprecated

In Vanilla 4.8.0 with the introduction of new theming system and updated Suru component various legacy strip variants have been deprecated.

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.

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-strip;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

React

You can use strip in React by installing our react-component library and importing Strip component.

See the documentation for our React Strip component