Components and patterns built with Bourbon and Neat.

New Library! Try out Empties: the unstyled Refills.

Managed by thoughtbot, instructions at GitHub

Refills requires Bourbon 5.0+ and Neat < 2.0, ≥ 1.6. We're working on another version with a focus on accessibility, which you can preview here.
Geometric

Article Type

Article Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

30 Mar 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.


Author Name

<head>
  <link href='//fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Sanchez:400italic,400' rel='stylesheet' type='text/css'>
</head>

<article class="type-system-geometric">
  <p class="type">Article Type</p>
  <h1>Article Heading</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>

  <p class="date">30 Mar 2014</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>
article.type-system-geometric {
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $sans-serif: 'Questrial', sans-serif;
  $serif: 'Sanchez', serif;

  @include clearfix;
  font-family: $sans-serif;
  text-align: left;

  h1, h2, h3, p {
    margin: 0;
  }

  hr {
    border-bottom: 1px solid $light-gray;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: $base-spacing 0;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

  .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 0.3em 0;
    text-align: left;
    text-transform: uppercase;
  }

  h1 {
    font-family: $serif;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 0.5em;

    @include media($medium-screen) {
      font-size: 2.6em;
    }
  }

  h2 {
    font-family: $serif;
    font-size: 1.2em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 1.1em;

    @include media($medium-screen) {
      font-size: 1.3em;
    }
  }

  code {
    background: #F7F7F7;
    border-radius: $base-border-radius * 1.5;
    border: 1px solid #E0E0E0;
    font-size: 0.7em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap;
  }

  h3 {
    font-family: $serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em;
  }

  p.date {
    color: transparentize($base-font-color, 0.6);
    font-family: $serif;
    font-size: 0.9em;
    font-style: italic;
    margin-bottom: 0.3em;
  }

  p {
    font-family: $sans-serif;
    font-size: 1.05em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
  }

  a.read-more {
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase;

    span {
      font-family: $sans-serif;
      font-size: 1.5em;
      font-style: normal;
      position: absolute;
      right: -12px;
      top: -1px;
    }
  }

  hr {
    width: 3em;
  }

  p.author {
    font-family: $sans-serif;
  }
}
Rounded Sans Serif

Article Type

Article Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

30 Mar 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.


Author Name

<head>
  <link href='//fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
</head>

<article class="type-system-rounded">
  <p class="type">Article Type</p>
  <h1>Article Heading</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
  <p class="date">30 Mar 2014</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>
article.type-system-rounded {
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477dca !default;
  $dark-gray: #333 !default;
  $light-gray: #ddd !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $sans-serif: "Nunito", sans-serif;
  $sans-serif-2: "Varela Round", sans-serif;

  @include clearfix;
  font-family: $sans-serif;
  text-align: left;

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  hr {
    border-bottom: 1px solid $light-gray;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: $base-spacing 0;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

  .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 0.3em 0;
    text-align: left;
    text-transform: uppercase;
  }

  h1 {
    font-family: $sans-serif-2;
    font-size: 1.8em;
    margin-bottom: 0.5em;

    @include media($medium-screen) {
      font-size: 2.4em;
    }
  }

  h2 {
    font-family: $sans-serif-2;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 0.9em;

    @include media($medium-screen) {
      font-size: 1.4em;
    }
  }

  code {
    background: #F7F7F7;
    border-radius: $base-border-radius * 1.5;
    border: 1px solid #E0E0E0;
    font-family: monaco;
    font-size: 0.7em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap;
  }


  h3 {
    font-family: $sans-serif-2;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em;
  }

  p.date {
    color: transparentize($base-font-color, 0.6);
    font-family: $sans-serif;
    font-size: 0.9em;
    margin-bottom: 0.3em;
  }

  p {
    font-family: $sans-serif;
    font-size: 1.05em;
    font-weight: 300;
    line-height: 1.4em;
    margin-bottom: 1.5em;

    span {
      font-family: $sans-serif-2;
      font-size: 0.8em;
      text-transform: uppercase;
    }
  }

  a.read-more {
    display: inline-block;
    font-family: $sans-serif-2;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase;

    span {
      font-size: 1.5em;
      position: absolute;
      right: -12px;
      top: -1px;
    }
  }

  hr {
    width: 3em;
  }

  p.author {
    font-family: $sans-serif;
  }
}
Sans Serif

Article Type

Article Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

30 Mar 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.


Author Name

<head>
  <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600italic,600,700,700italic,900,300italic,300,200italic,200' rel='stylesheet' type='text/css'>
</head>

<article class="type-system-sans">
  <p class="type">Article Type</p>
  <h1>Article Heading</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
  <p class="date">30 Mar 2014</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>
article.type-system-sans {
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477dca !default;
  $dark-gray: #333 !default;
  $light-gray: #ddd !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $sans-serif: "PT Sans", sans-serif;
  $sans-serif-2: "Titillium Web", sans-serif;

  @include clearfix;
  font-family: $sans-serif;
  text-align: left;

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  hr {
    border-bottom: 1px solid $light-gray;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: $base-spacing 0;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

  .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: $sans-serif-2;
    font-size: 0.7em;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 2em;
    padding: 0.1em 0;
    text-align: left;
    text-transform: uppercase;
  }

  h1 {
    font-family: $sans-serif-2;
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 0.6em;

    @include media($medium-screen) {
      font-size: 2.4em;
    }
  }

  h2 {
    font-family: $sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 1.2em;

    @include media($medium-screen) {
      font-size: 1.4em;
    }
  }

  code {
    background: #f7f7f7;
    border-radius: $base-border-radius * 1.5;
    border: 1px solid #e0e0e0;
    font-family: monaco;
    font-size: 0.65em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap;
  }

  h3 {
    font-family: $sans-serif-2;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
  }

  p.date {
    color: transparentize($base-font-color, 0.6);
    font-family: $sans-serif;
    font-size: 0.8em;
    margin-bottom: 0.5em;
  }

  p {
    font-family: $sans-serif;
    font-weight: 300;
    letter-spacing: 1;
    margin-bottom: 1.5em;

    span {
      font-family: $sans-serif;
      font-size: 0.8em;
      font-weight: 600;
      text-transform: uppercase;
    }
  }

  hr {
    width: 3em;
  }

  a.read-more {
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase;

    span {
      font-size: 1.7em;
      position: absolute;
      right: -10px;
      top: -2px;
    }
  }

  p.author {
    font-family: $sans-serif;
    font-style: italic;
  }
}
Serif

Article Type

Article Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

30 Mar 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.


Author Name

<head>
  <link href='//fonts.googleapis.com/css?family=Lusitana:400,700' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700italic,700,800,800italic' rel='stylesheet' type='text/css'>
</head>

<article class="type-system-serif">
  <p class="type">Article Type</p>
  <h1>Article Heading</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
  <p class="date">30 Mar 2014</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>
article.type-system-serif {
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $serif: 'Lusitana', serif;
  $serif-2: 'Merriweather', serif;
  $sans-serif: 'Merriweather Sans', sans-serif;

  @include clearfix;
  font-family: $serif-2;
  text-align: left;

  h1, h2, h3, p {
    margin: 0;
  }

  hr {
    border-bottom: 1px solid $light-gray;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: $base-spacing 0;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

  .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    margin-bottom: 2em;
    padding: 0.3em 0;
    text-align: left;
    text-transform: uppercase;
  }

  h1 {
    font-family: $serif;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 0.5em;

    @include media($medium-screen) {
      font-size: 2.6em;
    }
  }

  h2 {
    font-family: $serif-2;
    font-size: 1em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6em;
    margin-bottom: 0.9em;

    @include media($medium-screen) {
      font-size: 1.2em;
    }
  }

  code {
    background: #F7F7F7;
    border-radius: $base-border-radius * 1.5;
    border: 1px solid #E0E0E0;
    font-family: monaco;
    font-size: 0.75em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap;
  }

  h3 {
    font-family: $serif;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em;
  }

  p.date {
    color: transparentize($base-font-color, 0.6);
    font-family: $serif-2;
    font-size: 0.9em;
    font-style: italic;
    margin-bottom: 0.3em;
  }

  p {
    font-family: $serif-2;
    font-size: 0.9em;
    line-height: 1.6em;
    margin-bottom: 1.5em;

    span {
      font-family: $sans-serif;
      font-weight: 700;
    }
  }

  a.read-more {
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase;

    span {
      font-family: $serif;
      font-size: 1.5em;
      font-style: normal;
      position: absolute;
      right: -12px;
      top: -1px;
    }
  }

  hr {
    width: 3em;
  }

  p.author {
    font-family: $serif-2;
    font-style: italic;
  }
}
Slab Serif

Article Type

Article Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

30 Mar 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.


Author Name

<head>
  <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700' rel='stylesheet' type='text/css'>
</head>

<article class="type-system-slab">
  <p class="type">Article Type</p>
  <h1>Article Heading</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
  <p class="date">30 Mar 2014</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>
article.type-system-slab {
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $sans-serif: 'Open Sans', sans-serif;
  $serif: 'Roboto Slab', serif;

  @include clearfix;
  font-family: $serif;
  text-align: left;

  h1, h2, h3, p {
    margin: 0;
  }

  hr {
    border-bottom: 1px solid $light-gray;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: $base-spacing 0;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

  .type {
    border-bottom: 1px solid;
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.7em;
    font-weight: 600;
    margin-bottom: 2em;
    padding: 0.1em 0;
    text-align: left;
    text-transform: uppercase;
  }

  h1 {
    font-family: $serif;
    font-size: 1.6em;
    font-weight: 400;
    margin-bottom: 0.6em;

    @include media($medium-screen) {
      font-size: 2.4em;
    }
  }

  h2 {
    font-family: $sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.5em;
    margin-bottom: 1.2em;

    @include media($medium-screen) {
      font-size: 1.3em;
    }
  }

  code {
    background: #F7F7F7;
    border-radius: $base-border-radius * 1.5;
    border: 1px solid #E0E0E0;
    font-size: 0.8em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap;
  }

  h3 {
   font-family: $serif;
   font-size: 1em;
   font-weight: 600;
   line-height: 1.4em;
   margin-bottom: 0.5em;
   text-transform: uppercase;
  }

  p.date {
    color: transparentize($base-font-color, 0.6);
    font-family: $serif;
    font-size: 0.8em;
    margin-bottom: 0.5em;
  }

  p {
    font-family: $serif;
    font-weight: 300;
    letter-spacing: 1;
    margin-bottom: 1.5em;

    span {
      font-family: $sans-serif;
      font-size: 0.8em;
      font-weight: 600;
      text-transform: uppercase;
    }
  }

  a.read-more {
    display: inline-block;
    font-family: $serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase;

    span {
      font-size: 1.8em;
      position: absolute;
      right: -12px;
      top: -2px;
    }
  }

  hr {
    width: 3em;
  }

  p.author {
    font-family: $serif;
  }
}
Traditional

Article Type

Article Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam code block dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!

30 Mar 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Read More

Subheading lorem

Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.


Author Name

<head>
  <link href='//fonts.googleapis.com/css?family=Radley:400,400italic' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
</head>

<article class="type-system-traditional">
  <p class="type">Article Type</p>
  <h1>Article Heading</h1>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, perferendis! Odit quisquam <code>code block</code> dicta illum ipsa quod natus iure aliquid necessitatibus veritatis, itaque magnam aliquam, dolorum nostrum nemo, explicabo perspiciatis nobis!</h2>
  <p class="date">30 Mar 2014</p>
  <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
    <a href="javascript:void(0)" class="read-more">Read More <span>&rsaquo;</span></a>
  </p>
  <h3>Subheading lorem</h3>
  <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p>
  <hr>
  <p class="author">Author Name</p>
</article>
article.type-system-traditional {
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $sans-serif: 'Noto Sans', sans-serif;
  $serif: 'Radley', serif;

  @include clearfix;
  font-family: $sans-serif;
  text-align: left;

  h1, h2, h3, p {
    margin: 0;
  }

  hr {
    border-bottom: 1px solid $light-gray;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: $base-spacing 0;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

  .type {
    border-bottom: 2px solid;
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 0.1em 0;
    text-align: left;
    text-transform: uppercase;
  }

  h1 {
    font-family: $serif;
    font-size: 1.9em;
    font-weight: 700;
    margin-bottom: 0.3em;

    @include media($medium-screen) {
      font-size: 2.6em;
    }
  }

  h2 {
    font-family: $serif;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.25em;
    margin-bottom: 0.9em;

    @include media($medium-screen) {
      font-size: 1.5em;
    }
  }

  code {
    background: #F7F7F7;
    border-radius: $base-border-radius * 1.5;
    border: 1px solid #E0E0E0;
    font-size: 0.75em;
    font-style: normal;
    padding: 0.1em 0.4em;
    white-space: nowrap;
  }

  h2 code {
    font-size: 0.65em;
  }

  h3 {
    font-family: $serif;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 0.4em;
  }

  p.date {
    color: transparentize($base-font-color, 0.6);
    font-family: $serif;
    font-style: italic;
    margin-bottom: 0.3em;
  }

  p {
    font-family: $sans-serif;
    letter-spacing: 1;
    line-height: 1.55em;
    margin-bottom: 1.5em;

    span {
      font-family: $serif;
      font-size: 1.2em;
      font-style: italic;
    }
  }

  a.read-more {
    display: inline-block;
    font-family: $sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    margin-left: 0.2em;
    position: relative;
    text-transform: uppercase;

    span {
      font-family: $sans-serif;
      font-size: 1.5em;
      font-style: normal;
      position: absolute;
      right: -12px;
      top: -1px;
    }
  }

  hr {
    width: 3em;
  }

  p.author {
    font-family: $serif;
    font-size: 1.2em;
    font-style: italic;
  }
}