Strip

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.

View example of the strip light pattern

View example of the strip dark pattern

Strip accent

The purpose of the strip accent pattern displays content with a highlighted site accent strip style.

View example of the pattern strip accent

Strip image

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 markup.

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.

View example of the pattern strip image

Strip is-bordered

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.

View example of the pattern strip is-bordered

Strip is-deep

This state gives the strip larger vertical padding.

View example of the pattern strip is-deep

Strip is-shallow

This state gives the strip smaller vertical padding.

View example of the pattern strip is-shallow