This styleguide displays our basic design elements, such as typography and colors. It also demonstrates a series of layout objects and how they can be used.
Please inspect the source code to for classes or markup for use.
Body XL Semibold
Body XL Medium
Body Large Semibold
Body Large Medium
Body Large Regular
Body Large link
Black & White
The wrapper object has a max-width, and is automatically centered with a margin left/right auto.
It has left/right padding to stop content from getting too close to the screen edges.
You can break out of a wrapper by using the o-wrapper__wide or o-wrapper__bleed class, which applies negative margins to the element, as seen below.
A stack is used to vertically space content. Rather than spacing individual elements, it spaces by context.
It does this using a top margin, applied to every element except the first, and it does it using a series of context-based rules, such as p + p or p + img.
This means we could add spacing rules that work for flow content.
In the example below, we use a stack to evenly space content, as well as show an example of how a form with labels could utilise nested stacks of different sizes.
Note that Orange is the parent stack margin and Pink is the child stack margin.
A cluster can group a series of elements together, such as buttons, while maintaining even spacing on all sides, even when wrapping.
Note that a cluster must have a child element (in this case a div) on which it can apply a negative margin. That element then contains all the cluster items.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5