Colours

Monochrome

Alerts

Brand Collections

Skincare

Bath + Body

Code examples:

<div class="u-background-color--black"></div>

<h1 class="u-color--black">Heading 1</h1>

Typography

Headings

Hero

u--is-hero

Code example:

<h1 class="u--is-hero">Hero</h1>

Heading 1

h1

Heading 2

h2

Heading 3

h3

Heading 4

h4

Heading 5

h5

Heading 6

h6

Heading 1 Styled as Heading 3

Code example:

<h1 class="h3">Heading 1 Styled as Heading 3</h1>

Paragraphs

Lead Paragraph

u--is-lead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code example:

<p class="u--is-lead">Lorem ipsum dolor sit amet</p>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, This is a link sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

Text Styling

Code example:

<h1 class="u-text-transform--uppercase u-text-align--center">Heading 1</h1>

Buttons

Button Types

button/button-primary
button-secondary
button-white
button-white-inverted

Primary Button Secondary Button

White Button White Inverted Button

Button Size Modifiers

button-tiny
button-small
button-large

Tiny Button Small Button Regular Button Large Button

Button Width Modifier

Button with fixed width

Code example:

<a class="button button-small button-secondary" href="#">Button Text Here</a>

Margins & Padding

Code example:

<div class="u-margin-bottom--16 u-margin-bottom--32--medium-up u-padding--16 u-padding--32--medium-up"></div>

Display

Code examples:

Note: You need to set a default value in combination with a responsive value.

<!-- Mobile only -->
<div class="u--show u--hide--medium-up"></div>

<!-- Tablet and above -->
<div class="u--hide u--show--medium-up"></div>

Width & Height

Code examples:

<div class="u-max-width--1280"></div>

<div class="u-width--100pc u-width--50pc--medium-up"></div>

Flexible Ratio Object

Applies a ratio to a div but, rather than cropping long content, the height will extend to accommodate it.

Code example:

<div class="o-flex-ratio--1by1 o-flex-ratio--3by2--medium-up o-flex-ratio--3by1--large-up">
    <div><!-- Content --></div>
</div>

Flexbox

u-flexbox

Code example:

<div class="u-flexbox u-flexbox--center"></div>

Grid Object

Code example:

<div class="o-grid o-gutter--32 o-grid--align-middle o-grid--align-center">
  <div class="o-grid__cell o-unit-1of2 o-unit-1of4--medium-up">
    <!-- Content -->
  </div>
  <div class="o-grid__cell o-unit-1of2 o-unit-1of4--medium-up">
    <!-- Content -->
  </div>
</div>

Full Width Media

o-media--full-width

Code example:

<img class="o-media--full-width" src="image.jpg">

Background images

Images can be added inline as background elements, and then controlled using the background utility classes.

Code example:

<div class="o-flex-ratio--3by2 u-background-size--cover u-background-position--bottom u-background-position--right--medium-up" style="background-image: url();"></div>

Object Fit

o-object-fit--cover

o-object-fit--contain

Code example:

<div><img class="o-object-fit--contain" src="image.jpg"></div>

Media Embed

Simply wrap your embed code in a div and set a ratio.

Code example:

<div class="o-flex-ratio--16by9">
      <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6Jxv4PzeRdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Media Object

A media object consists of an image and text. The image can be aligned to the left or right.

Examples:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec sagittis lacus, sit amet hendrerit ante. Nulla sit amet pulvinar nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor neque, ultrices eget metus sit amet, laoreet tristique ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec sagittis lacus, sit amet hendrerit ante. Nulla sit amet pulvinar nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor neque, ultrices eget metus sit amet, laoreet tristique ligula.

Code example:

<div class="o-media o-media--center">
  <img src="assets/img/style-guide/style-guide-01_w128.jpg">
  <div>
    <p class="u-margin--none">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Bringing it all together

Combinations of the utilities and objects can be used together to build complex layout components.

All the things:

<div class="o-flex-ratio--1by1 o-flex-ratio--3by2--small-up o-flex-ratio--2by1--large-up u-background-size--cover u-background-position--bottom u-text-align--center" style="background-image: url(assets/img/style-guide/style-guide-03.jpg);">
  <div class="o-grid o-grid--align-middle">
    <div class="o-grid__cell o-unit-2of3 o-unit-1of2--small-up u-padding--32">
      <div class="u-padding-y--32 u-padding-x--16 u-background-color--white">
        <h4 class="h3 u-margin-top--none u-margin-bottom--8">Summer Skincare</h4>
        <p class="u-margin-top--8 u-line-height--1-25 u-font-size--14 u-font-size--16--medium-up">Up to 20% off our Summer Skincare range!</p>
        <a class="button button-small" href="#" title="SHOP SUMMER SKINCARE">SHOP SUMMER SKINCARE</a>
      </div>
    </div>
  </div>
</div>