Main title

This is a main title

<div class="main-title">
  <h1>This is a page title</h1>
</div>
Heading 1

This is a heading 1

<h1>This is a heading 1</h1>
Heading 2

This is a heading 2

<h2>This is a heading 2</h2>
Heading 3

This is a heading 3

<h3>This is a heading 3</h3>
Heading 4

This is a heading 4

<h4>This is a heading 4</h4>
Heading captions

This is a heading 1 with a regular caption

<h1>This is a heading 1 <span class="main-title__caption">with a caption</span></h1>
Heading pagination caption

This is a heading 1 with a page number

<h1>This is a heading 1 <span class="main-title__caption main-title__caption--page">with a page number</span></h1>
Paragraph

Claude Monet was a famous French painter whose work gave a name to the art movement Impressionism, which was concerned with capturing light and natural forms.

He was born on November 14, 1840, in Paris, France, and enrolled in the Academie Suisse. After an art exhibition in 1874, a critic insultingly dubbed Monet's painting style "Impression," since it was more concerned with form and light than realism, and the term stuck. Monet struggled with depression, poverty and illness throughout his life. He died in 1926.

<p>Claude Monet was a famous French painter whose work gave a name to the art movement Impressionism, which was concerned with capturing light and natural forms.</p>
<p>He was born on November 14, 1840, in Paris, France, and enrolled in the Academie Suisse. After an art exhibition in 1874, a critic insultingly dubbed Monet
Lists
  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
Definition list term 1
Definition list definition 1
Definition list term 2
Definition list definition 2
Definition list term 3
Definition list definition 3
Definition list term 4
Definition list definition 4
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>
<dl>
  <dt>Definition list term 1</dt>
  <dd>Definition list definition 1</dd>
  <dt>Definition list term 2</dt>
  <dd>Definition list definition 2</dd>
  <dt>Definition list term 3</dt>
  <dd>Definition list definition 3</dd>
  <dt>Definition list term 4</dt>
  <dd>Definition list definition 4</dd>
</dl>
Hero

Abstract

Collection

<div class="hero" style="background-image: url(//cdn.shopify.com/s/files/1/0895/0864/collections/abstract-posters_1200x.progressive.jpg?v=1452857179);">
  <div class="hero__caption">
    <h1 class="hero__title">Abstract</h1>
    <div class="hero__subtitle">





Collection

</div>
  </div>
</div>

<ul>
  <li class="tag"><a href="" title="">Tag 1 text</a></li>
  <li class="tag"><a href="" title="">Tag 2 text</a></li>
  <li class="tag"><a href="" title="">Tag 3 text</a></li>
</ul>
<ul style="background:black; padding-bottom: 0.75em;">
  <li class="tag tag--inverse"><a href="" title="">Tag 1 text</a></li>
  <li class="tag tag--inverse"><a href="" title="">Tag 2 text</a></li>
  <li class="tag tag--inverse"><a href="" title="">Tag 3 text</a></li>
</ul>
Tables
Column title Column title hidden on tablet Column title numeric
Text content Cell content £14.95
Text content Cell content £34.95
Footnote to table.
<table class="table">
  <thead>
    <tr>
      <td>Column title</td>
      <td class="u-hidden-tablet">Column title hidden on tablet</td>
      <td class="numeric">Column title numeric</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text content</td>
      <td class="u-hidden-tablet">Cell content</td>
      <td class="numeric">£14.95</td>
    </tr>
    <tr>
      <td>Text content</td>
      <td class="u-hidden-tablet">Cell content</td>
      <td class="numeric">£34.95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Footnote to table.</td>
    </tr>
  </tfoot>
</table>
Palette
Pale text
#808080
Body text
#444444
Heading text
#222222
Greyscale 1
#1A1A1A
Greyscale 2
#535353
Greyscale 3
#979797
Greyscale 4
#E4E7EA
Greyscale 5
#F0F0F0
Orange accent
#C03221
Red accent
#8C181A
Blue accent
#064E86
Green accent
#228016
Brown accent
#AD7859