The strip pattern provides a full width strip container in which to wrap a row. A strip can have light (.p-strip--light) or dark (.p-strip--dark) grey background.

A .p-strip container should always be the parent of a .row (from the Grid pattern) and never the other way around.

Accent strip

The purpose of the strip accent pattern is to display content with a highlighted strip using the accent colour.

Image strip

This pattern allows for an image background to be appear as a background on a strip.

Note:Declare the background-image as an inline style attribute in the HTML.

You can also add the classes '.is-light' and '.is-dark' to the strips to describe the background image. These classes will then override the text color to ensure it remains visible.

Bordered strip

This pattern is used to add a dividing border at the bottom of the strip.

Note:This should be used when two strips of the same type are used after each other.

Deep strip

This state gives the strip larger vertical padding.

Shallow strip

This state gives the strip smaller vertical padding.


To import just this component into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_strip';
@include vf-p-strip;

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


For more information view the strip design spec, which includes the specification in markdown format and a PNG image.