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.
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).
The purpose of the strip accent pattern is to display content with a highlighted strip using the accent colour.
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.
This pattern is used to add a dividing border at the bottom of the strip.
Note:
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.
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.
