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.
White strip
New
The purpose of the white strip is to display some highlighted content on white background when page background is non-white (for when using paper page background).
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
Deprecated
Deprecated
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
Deprecated
Deprecated
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.