<h1 class="Heading Heading--xx-large">
  Heading xx-large
</h1>

<h2 class="Heading Heading--x-large">
  Heading x-large
</h2>

<h3 class="Heading Heading--large">
  Heading large
</h3>

<h4 class="Heading Heading--small">
  Heading small
</h4>

<h5 class="Heading Heading--x-small">
  Heading x-small
</h5>

<h6 class="Heading Heading--xx-small">
  Heading xx-small
</h6>

<p class="Leader">
  Leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--medium">
  Medium size leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--large">
  Large leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--x-large">
  Extra large leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--x-large u-text-gradient">
  Leaders with gradiated text entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--xx-large u-text-gradient">
  Leaders with gradiated text entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--x-large Leader--lite">
  Lite leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p class="Leader Leader--x-large Leader--pull">
  Pulled leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

<p>
  Link styles get applied automatically to <a href="#">links inside editorial containers</a>, but can also be triggered by <a class="Link" href="#">adding a class of `Link`</a>.
</p>

<h3 class="Heading Heading--large">
  Links can be placed <a class="Heading-link" href="#">inside headings</a>.
</h3>

<h3 class="Leader Leader--large">
  Links can also be placed <a class="Link" href="#">inside large leaders</a>.
</h3>


<h3 class="Heading Heading--large">
  <a class="Heading-link has-rightArrow" href="#">Links can have arrows</a>
</h3>

<p class="Metadata Metadata--large">
  <a class="Link Link--Metadata" href="#">
    Links can appear in a metadata style
  </a>
</p>

<ul class="List List--bare">
  <li>
     A bare list, without any markers
  </li>
  <li>
    Useful when the list structure shouldn’t be pronounced
  </li>
</ul>

<ul class="List List--dashed">
  <li>
    Important: ensure content inside the list items is typed on a new line, else horizontal alignment of the dash + content will be off. The dashed list is used frequently.
  </li>
  <li>
    Replacing bullets with dashes feels more elegant
  </li>
</ul>

<ul class="List List--dashed List--dashed--indented">
  <li>
    A dashed list that’s also indented
  </li>
  <li>
    When a more pronounced break from other content is required
  </li>
</ul>

<ul class="List List--dashed List--dashed--negativeIndent">
  <li>
    A negatively indented dashed list
  </li>
  <li>
    Useful when the left edge of the text column should remain flush
  </li>
</ul>

<ul class="List List--dashed List--dashed--xx-loose">
  <li>
    The xx-loosely dashed list
  </li>
  <li>
    Useful when items contain a lot of content
  </li>
</ul>

<ul class="List List--dashed List--dashed--x-loose">
  <li>
    A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  </li>
  <li>
    A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  </li>
  <li>
    A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  </li>
</ul>

<ol class="List List--orderedCounter">
  <li>
    <h3 class="Heading Heading--large">
      <span class="List--orderedCounter-count">
        An ordered counter list
      </span>
    </h3>
    <p>
      There’s typically a paragraph following each ordered counter item, further expanding upon the heading.
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large">
      <span class="List--orderedCounter-count">
        Where each item has a count
      </span>
    </h3>
    <p>
      There’s typically a paragraph following each ordered counter item, further expanding upon the heading.
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large">
      <span class="List--orderedCounter-count">
        Which continue in sequence
      </span>
    </h3>
    <p>
      There’s typically a paragraph following each ordered counter item, further expanding upon the heading.
    </p>
  </li>
</ol>

<ol class="List List--dashed List--dashed--xx-loose">
  <li>
    <h3 class="Heading Heading--large u-display--inline">
      <span>
        Inline list example.
      </span>
    </h3>
    <p class="u-display--inline">
      Is currently just produced using utility classes on individual heading and paragraph elements.  
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large u-display--inline">
      <span>
        Works for dashed or orderedCounter.
      </span>
    </h3>
    <p class="u-display--inline">
      Doesn't matter which list type because it's all just driven with utility classes.
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large u-display--inline">
      <span>
        Use loose spacing.
      </span>
    </h3>
    <p class="u-display--inline">
       The `List--dashed--xx-loose` class will help here.   
    </p>
  </li>
</ol>

<ol class="List List--orderedCounter List--orderedCounter--indented">
  <li>
    <span class="List--orderedCounter-count">
      An indented ordered counter list 
    </span>
  </li>
  <li>
    <span class="List--orderedCounter-count">
      Indentation width matches indentation for dashed lists
    </span>
  </li>
  <li>
    <span class="List--orderedCounter-count">
      Line spacing can be altered with the `List--loose`, `List--x-loose`, `List--xx-loose` classes
    </span>
  </li>
</ol>

<p class="Metadata">
  Metadata is supplementary; extra information to clarify another element.
</p>

<p class="Metadata Metadata--large">
  Metadata is smaller than regular body text by default, but can be increased in size. Note the size increase only kicks in at larger breakpoints.
</p>

<p class="Metadata Metadata--small">
  Metadata can be made even smaller than its default size if required.
</p>

<h1 class="Heading Heading--xx-large">
  Page/post title
</h1>
<span class="Metadata Metadata--editorialSubhead">
  Metadata as an editorial subheading
</span>

<p class="Metadata Metadata--limitWidth">
  Metadata can have its measure limited, independently of any container, to prevent pesky long lines from disrupting thr reading experience. This is particularly useful when metadata takes the form of a paragraph.
</p>

<p class="Metadata Metadata--figcaption">
  The `figcaption` element is treated as metadata.
</p>

<p class="Metadata Metadata--figcaption--text-align--left">
  Metadata `figcaption` elements are right-aligned by default, but but can left-aligned if desired.  
</p>

<blockquote class="Pullquote">
  <span class="Pullquote-quote u-text-gradient">Pull quotes stick out of the right and left-hand sides of the main content column by default. It’s a useful feature when they’re quite long, but they can be contained easily.</span>
</blockquote>

<blockquote cite="http://robbiemanson.com/styleguide/" class="Pullquote Pullquote--contained">
  <span class="Pullquote-quote u-text-gradient">Contained pull quotes always stay inside their parent column. This helps to keep things feeling tidy. Ideally they’re a little shorter in length.</span>
  <footer>
    <cite class="Pullquote-cite">Cited Author, <a class="Link" href="http://robbiemanson.com/styleguide/">Cited Publication</a></cite>
  </footer>
</blockquote>

<blockquote class="Pullquote">
  <span class="Pullquote-quote">Pull quotes don’t need to be colourful. They can be the standard old text colour, a bit like this.</span>
</blockquote>

<blockquote class="Pullquote Pullquote--lite">
  <span class="Pullquote-quote">Pull quotes come in a ‘lite’ variant, useful for knocked back leaders and whatnot. The reduced contrast means you can get away with a bit more content.</span>
</blockquote>

<table class="Table">
  <thead>
    <tr>
      <th>Table header</th>
      <th>Table header</th>
      <th>Table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

<table class="Table">
  <thead>
    <tr>
      <th>Table header</th>
      <th>Table header</th>
      <th>Table header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Table-row Table-row--borderBottom">
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr class="Table-row Table-row--borderBottom">
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

<table class="Table Table--alignTop Table--wide">
  <thead>
    <tr>
      <th class="Table-head Table-head--narrow">Phase</th>
      <th class="Table-head Table-head--narrow">Mindset</th>
      <th class="Table-head Table-head--medium">Focus</th>
      <th class="Table-head Table-head--medium">Metrics</th>
      <th class="Table-head Table-head--medium">Process</th>
      <th class="Table-head Table-head--medium">Craft</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Table-row Table-row--borderBottom">
      <td><strong>Explore</strong></td>
      <td>Move fast and break things</td>
      <td>Experiment. The 10x/100x idea that gains traction will be a diamond in the rough. Expect lots of failures. That's fine – you have nothing to lose.</td>
      <td>Don't stress about defining your own yet, you're still looking for them.</td>
      <td>Forget about estimates, just time-box your work and pay attention. Be Agile if that's your thing.</td>
      <td>Not a priority. Time spent fine-tuning code / design / scontent is time you could be spending exploring (starting new experiments).</td>
    </tr>
    <tr class="Table-row Table-row--borderBottom">
      <td><strong>Expand</strong></td>
      <td>Focus on impact</td>
      <td>Remove scaling bottlenecks by solving the difficult technical problems. Focus on future impact because the work is unlikely to produce immediate payoffs.</td>
      <td>Define what you need to measure the success of the technical problems being solved.</td>
      <td>Use estimates as a way to ruthlessly prioritise and sequence the most important work. Celebrate each win no matter how small each may feel.</td>
      <td>Iterate but don't refactoring too heavily yet. The public results of code / design / content changes are still more important than their internal states.</td>
    </tr>
    <tr>
      <td><strong>Extract</strong></td>
      <td>Slow down and fix your shit</td>
      <td>Few experiments. Minimise the possibility of failure. Upside is that every fix is multipled because of the work done in Expand.</td>
      <td>They drive everything. Now is about picking which of those metric levers to pull on at different times.</td>
      <td>Forget about Agile. Forget about XP. This is not a game of courage like Explore. There's a lot to lose.</td>
      <td>Make everything the best it can be. Refactor, refine, polish.</td>
    </tr>
  </tbody>
</table>