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.
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:
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:
Deep strip
This state gives the strip larger vertical padding.
Shallow strip
This state gives the strip smaller vertical padding.
Suru strip
This is a patterned strip that is ideal for overview or main pages, and can be used with images.
The colours of the solid gradient are based on $color-brand
by default. The gradient colours can be customised by overriding the $color-suru-start
, $color-suru-middle
and $color-suru-end
variables. A dark colour scheme is recommended, as the text colour is light by default.
Topped Suru strip
This is a patterned strip that is ideal for content pages.
The colours of the solid gradient are based on $color-brand
by default. The gradient colours can be customised by overriding the $color-suru-start
, $color-suru-middle
and $color-suru-end
variables.
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.