Buttons

Link button
<button class="Button" type="button">Button button</button>
<a class="Button" href="#" role="button">Link button</a>

Grid

Foundation Grid with some custom breakpoints.

s-3 m-4
s-3 m-6
s-3 m-1
s-3 m-1
<div class="row">
  <div class="column small-3 medium-4">s-3 m-4</div>
  <div class="column small-3 medium-6">s-3 m-6</div>
  <div class="column small-3 medium-1">s-3 m-1</div>
  <div class="column small-3 medium-1">s-3 m-1</div>
</div>
m-8 m-push-4
<div class="row">
  <div class="column medium-8 medium-push-4">m-8 m-push-4</div>
</div>
m-4
m-8
<div class="row">
  <div class="column medium-4">m-4</div>
  <div class="column medium-8">m-8</div>
</div>
m-4
m-8 l-4
m-8 l-4
<div class="row">
  <div class="column medium-4">m-4</div>
  <div class="column medium-8 large-4">m-8 l-4</div>
  <div class="column medium-8 large-4">m-8 l-4</div>
</div>
m-8 m-push-4 l-4
m-8 l-4
<div class="row">
  <div class="column medium-8 medium-push-4 large-4">m-8 m-push-4 l-4</div>
  <div class="column medium-8 large-4">m-8 l-4</div>
</div>
s-6 m-4 m-push-4
s-6 m-4
<div class="row">
  <div class="column small-6 medium-4 medium-push-4">s-6 m-4 m-push-4</div>
  <div class="column small-6 medium-4">s-6 m-4</div>
</div>
m-4
m-8
<div class="row row--Editorial">
  <div class="column medium-4">m-4</div>
  <div class="column medium-8">m-8</div>
</div>

Block Grid

<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-2">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>
<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-3">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>
<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-4">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>
<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-5">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>

Headings

Heading xx-large

Heading x-large

Heading large

Heading small

Heading x-small
Heading xx-small
<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>

Leaders

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 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>

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 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>

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 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>

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 class="Leader Leader--extraLarge">
  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>

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 class="Leader Leader--extraLarge 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>

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 class="Leader Leader--extraLarge 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>

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 class="Leader Leader--extraLarge 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>

Links

Link styles get applied automatically to links inside editorial containers, but can also be triggered by adding a class of `Link`.

Links can also be placed inside headings.

Links can have arrows

<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 also be placed <a class="Heading-link" href="#">inside headings</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>

Lists

  • A bare list, without any markers
  • Useful when the list structure shouldn’t be pronounced
<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>
  • The dashed list is used frequently
  • Replacing bullets with dashes feels more elegant
<ul class="List List--dashed">
  <li>
    The dashed list is used frequently
  </li>
  <li>
    Replacing bullets with dashes feels more elegant
  </li>
</ul>
  • A dashed list that’s also indented
  • When a more pronounced break from other content is required
<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>
  • A negatively indented dashed list
  • Useful when the left edge of the text column should remain flush
<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>
  • The loosely dashed list
  • Useful when items contain a lot of content
<ul class="List List--dashed List--dashed--loose">
  <li>
    The loosely dashed list
  </li>
  <li>
    Useful when items contain a lot of content
  </li>
</ul>
  • A list with extra-loosely spaced items
  • Useful when items contain even more content
<ul class="List List--dashed List--dashed--x-loose">
  <li>
    A list with extra-loosely spaced items
  </li>
  <li>
    Useful when items contain even more content
  </li>
</ul>
  1. An ordered counter list

    There’s typically a paragraph following each ordered counter item, further expanding upon the heading.

  2. Where each item has a count

    There’s typically a paragraph following each ordered counter item, further expanding upon the heading.

  3. Which continue in sequence

    There’s typically a paragraph following each ordered counter item, further expanding upon the heading.

<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>

Media

<figure class="MediaContainer">
  <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/freeagent-mobile--masthead4.jpg" alt="" />
  <figcaption class="Metadata Metadata--figcaption">
    Image caption
  </figcaption>
</figure>
<figure class="MediaContainer">
  <figcaption class="Metadata Metadata--figcaption">
    Lazy loaded image
  </figcaption>
  <img class="lazyload Media Media--image" data-src="http://assets.robbiemanson.com/assets/images/case-studies/project-dashboards/project-dashboards--moodboards.jpg" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
</figure>
<figure class="MediaContainer">
  <img class="Media Media--image u-width--100percent" src="http://assets.robbiemanson.com/assets/images/case-studies/project-dashboards/project-dashboards--masthead.jpg" alt="" />
</figure>
<div class="column small-6 medium-4 medium-push-4">

  <figure>
    <figcaption class="Metadata Metadata--figcaption">
      Video
    </figcaption>
    <div class="MediaContainer MediaContainer--mobile">
      <img class="lazyload Media Media--image Media--image--feature Media--image--poster"
          data-src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home--poster.png" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
      <video id="freeagent-mobile--home"
          class="lazyload Media Media-video Media-video--inline video-js vjs-big-play-centered vjs-default-skin"
          controls
          data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false, "fullscreenToggle": false, "volumeControl": false } } } }'
          preload="none">
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home.mp4" type="video/mp4" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home.webmhd.webm" type="video/webm" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home.oggtheora.ogv" type="video/ogg" />
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
      </video>
    </div>
  </figure>

</div>
<div class="column small-6 medium-4">

  <figure>
    <figcaption class="Metadata Metadata--figcaption">
      Video
    </figcaption>
    <div class="MediaContainer MediaContainer--mobile">
      <img class="lazyload Media Media--image Media--image--feature Media--image--poster"
          data-src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices--poster.png" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
      <video id="freeagent-mobile--invoices"
          class="lazyload Media Media-video Media-video--inline video-js vjs-big-play-centered vjs-default-skin"
          controls
          data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false, "fullscreenToggle": false, "volumeControl": false } } } }'
          preload="none">
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices.mp4" type="video/mp4" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices.webmhd.webm" type="video/webm" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices.oggtheora.ogv" type="video/ogg" />
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
      </video>
    </div>
  </figure>

</div>

Metadata

<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>

Page/post title

<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>

NavList + NavLink

<ul class="NavList" role="navigation">
  <li>
  	<a class="NavLink NavLink--current" href="">
      Current NavLink item
    </a>
  </li>
  <li>
  	<a class="NavLink" href="">
      Regular weight
    </a>
  </li>
  <li>
  	<a class="NavLink NavLink--bold" href="">
      Bold weight
    </a>
  </li>
</ul>
<ol class="NavList NavList--inline" role="navigation">
  <li>
    <a class="NavLink" href="">
      Inline NavList
    </a>
  </li>
  <li>
    <a class="NavLink NavLink--current" href="">
      Current NavLink
    </a>
  </li>
  <li>
    <a class="NavLink NavLink--small" href="">
      Small NavLink
    </a>
  </li>
  <li class="Metadata Metadata--small">
    Metadata in inline NavList
  </li>
</ol>

Pull quote

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.
<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>
Contained pull quotes always stay inside their parent column. This helps to keep things feeling tidy. Ideally they’re a little shorter in length.
<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>
Pull quotes don’t need to be colourful. They can be the standard old text colour, a bit like this.
<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>
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.
<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

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