Initial script output for tachyons cson build for atom snippets

cson.js

var fs = require('fs')
var _ = require('lodash')
var path = require('path')
var glob = require('glob')
var titleize = require('titleize')
var fm = require('json-front-matter')
var rmHtmlExt = require('remove-html-extension')

glob('src/components/**/*.html', {}, function (err, components) {
  if (err) {
    console.error(err)
    return
  }

  var cson = '".text.html":\n\n'
  components.forEach(function (component) {
    var prefix = rmHtmlExt(component.replace('src/components/', '')).split('/')[1]
    var componentHtml = fs.readFileSync(component, 'utf8')

    var fmParsed = fm.parse(componentHtml)
    var frontMatter = fmParsed.attributes || {}

    cson += `
    '${frontMatter.title || getTitle(component)}':
      'prefix': '${prefix}'
      'body': """
      ${fmParsed.body.trim()}
      """
`
  })

  console.log(cson)
})

function getTitle(component) {
  var title = rmHtmlExt(component).replace('src/components/', '').replace(/(\/|_|-)/g, ' ')
  return titleize(title)
}

function getName(component) {
  return titleize(getTitle(component.split('/')[3]))
}

tachyons-cson-output.cson

> [email protected] cson /Users/johno/code/tachyons-css.github.io
> node src/components-cson-build.js

".text.html":


    'Articles Feature':
      'prefix': 'feature'
      'body': """
      <article class="athelas">
  <div class="vh-100 dt w-100 tc bg-dark-gray white cover" style="background:url(http://mrmrs.io/photos/u/009.jpg) no-repeat center;">
    <div class="dtc v-mid">
      <header class="white-70">
        <h2 class="f6 fw1 ttu tracked mb2 lh-title">Issue Six</h2>
        <h3 class="f6 fw1 lh-title">Summer MMXVI</h3>
      </header>
      <h1 class="f1 f-headline-l fw1 i white-60">The Chronicles</h1>
      <blockquote class="ph0 mh0 measure f4 lh-copy center">
        <p class="fw1 white-70">
          It's the space you put between the notes that make the music.
        </p>
        <cite class="f6 ttu tracked fs-normal">Massimo Vignelli</cite>
      </blockquote>
    </div>
  </div>
  <div class="center measure-wide f5 pv5 lh-copy ph2">
    <h1 class="f1 lh-title">The repercussion of ugliness is endless</h1>
    <p>
      The choice of paper size is one of the  rst of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
    </p>
    <p>
      The international Standard paper sizes, called the A series, is based
      on a golden rectangle, the divine proportion. It is extremely handsome
      and practical as well. It is adopted by many countries around the world
      and is based on the German DIN metric Standards. The United States uses
      a basic letter size (8 1/2 x 11”) of ugly proportions, and results in
      complete chaos with an endless amount of paper sizes. It is a
      by-product of the culture of free enterprise, competition and waste.
      Just another example of the misinterpretations of freedom.
    </p>
    <p>
      These are the basic DIN sizes in mm. for : A0, 841x1189 - A1, 594x841 -
      A2, 420x594 - A3, 297x420 - A4, 210x297 - A5, 148x210 - A6, 105 x148 -
      A7, 74x 105 - A8, 52x74 - A9, 37x52 - A10, 26x37.
    </p>
    <p>
      The A4 is the basic size for stationary. Two thirds of it is a square,
      a nice economical happenstance resulting from the golden rectangle.
      It is one of the reasons we tend to use as much
      as possible the DIN sizes: proportions are always leading to other nice proportions.
    </p>
    <p>
      This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders,  les and of ce equipment!
      The repercussion of ugliness is endless.
    </p>
  </div>
</article>
      """

    'Articles Full Bleed Background':
      'prefix': 'full-bleed-background'
      'body': """
      <article data-name="article-full-bleed-background">
  <div class="cf" style="background: url(http://mrmrs.io/photos/12.jpg) no-repeat center center fixed; background-size: cover;">
    <div class="fl pa3 pa4-ns bg-white black-70 measure-narrow f3 times">
      <header class="bb b--black-70 pv4">
        <h3 class="f2 fw7 ttu tracked lh-title mt0 mb3 avenir">Prasat Suor Prat</h3>
        <h4 class="f3 fw4 i lh-title mt0">Siem Reap, Cambodia</h4>
      </header>
      <section class="pt5 pb4">
        <p class="times lh-copy measure f4 mt0">
          Prasat Suor Prat (Khmer: ប្រាសាទសួព្រ័ត) is a series of twelve towers spanne
          north to south lining the eastern side of royal square in Angkor Thom,
          near the town of Siem Reap, Cambodia. The towers are made from rugged
          laterite and sandstone. The towers are located right in front of
          Terrace of the Elephants and Terrace of the Leper King, flanking the
          start of the road leading east to the Victory Gate, on either side of
          which they are symmetrically arranged. Their function remains unknown.
        </p>
      </section>
    </div>
  </div>
</article>
      """

    'Articles Large Title Text':
      'prefix': 'large-title-text'
      'body': """
      <article class="pa3 pa5-ns">
  <h1 class="f2 f-subheadline-ns mb4">9.5.1 If the text will be read on the screen, design it for that medium.</h1>
  <p class="gray f6 mb4 ttu tracked">By Robert Bringhurst</p>
  <p class="f4 f3-ns measure lh-copy">
    Like a forest or a garden or a field, an honest page of letters can absorb &ndash;
    and will repay &ndash; as much attention as it is given. Much type now, however, is
    composed not for the page but for the screen of a computer. That screen can be
    alive with flowing color, but the best computer monitors have dismal resolution
    (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of
    the norm for professional digital typesetting). When the text is crudely
    rendered, the eye goes looking for distraction, which the screen is all too
    able to provide.
  </p>
  <p class="f4 f3-ns measure lh-copy">
    The screen mimics the sky, not the earth. It bombards the eye with light
    instead of waiting to repay the gift of vision. It is not simultaneously
    restful and lively, like a field full of flowers, or the face of a thinking
    human being, or a well-made typographic page. And we read the screen the way
    we read the sky: in quick sweeps, guessing at the weather from the changing
    shapes of clouds, or like astronomers, in magnified small bits, examining
    details. We look to it for clues and revelations more than wisdom. This makes
    it an attractive place for advertising and dogmatizing, but not so good a
    place for thoughtful text.
  </p>
  <p class="f4 f3-ns measure lh-copy">
    The screen, in other words, is a reading environment even more fugitive than
    the newspaper. Intricate long sentences full of unfamiliar words stand little
    chance. At text size, subtle and delicate letterforms stand little chance as
    well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In
    the harsh light and coarse resolution of the screen such accessories are
    difficult to see; what is worse, they dispel the essential illusion of speed.
    so the links and jumps of hypertext replace them. All the subtexts then can be
    the same size and readers are at liberty to skip from text to text like
    children switching channels on tv. When reading takes this form, sentences and
    letterforms retreat to blunt simplicity. Forms bred on newsprint and signage
    are most likely to survive.
  </p>
</article>
      """

    'Articles Left Title Top Border':
      'prefix': 'left-title-top-border'
      'body': """
      <article class="cf ph3 ph5-ns pv5">
  <header class="fn fl-ns w-50-ns pr4-ns">
    <h1 class="f2 lh-title fw9 mb3 mt0 pt3 bt bw2">
      On Typography
    </h1>
    <h2 class="f3 mid-gray lh-title">
      An excerpt from the Form of the Book by Jan Tschichold
    </h2>
    <time class="f6 ttu tracked gray">Sometime before 1967</time>
  </header>
  <div class="fn fl-ns w-50-ns">
    <p class="f5 lh-copy measure mt0-ns">
      TYPOGRAPHY, even when poorly executed, can never be taken for granted;
      nor is it ever accidental. Indeed, beauti- fully typeset pages are always
      the result of long experience. Now and then they even attain the rank of
      great artistic achievement. But the art of typesetting stands apart from
      ex- pressive artwork, because the appeal is not limited to a small
      circle. It is open to everyone's critical judgment, and nowhere does this
      judgment carry more weight. Typography that can- not be read by everybody
      is useless. Even for someone who constantly ponders matters of
      readability and legibility, it is difficult to determine whether
      something can be read with ease, but the average reader will rebel at
      once when the type is too small or otherwise irritates the eye; both are
      signs of a certain illegibility already.
    </p>
    <p class="f5 lh-copy measure">
      All typography consists of letters. These appear either in the form of a
      smoothly running sentence or as an assembly of lines, which may even have
      contrasting shapes. Good typog- raphy begins, and this is no minor
      matter, with the typeset- ting of a single line of text in a book or a
      newspaper. Using exactly the same typeface, it is possible to create either
      a pleasant line, easily read, or an onerous one. Spacing, if it is too wide
      or too compressed, will spoil almost any typeface.
    </p>
  </div>
</article>
      """

    'Articles Left Title':
      'prefix': 'left-title'
      'body': """
      <article class="cf ph3 ph5-ns pv5">
  <header class="fn fl-ns w-50-ns pr4-ns">
    <h1 class="mb3 mt0 lh-title">Clay in a Potter's Hand</h1>
    <time class="f6 ttu tracked gray">Jan Tschichold</time>
  </header>
  <div class="fn fl-ns w-50-ns">
    <p class="lh-copy measure mt4 mt0-ns">
      PERFECT typography is more a science than an art. Mastery of the trade is
      indispensable, but it isn't everything. Unerring taste, the hallmark of
      perfection, rests also upon a clear understanding of the laws of harmonious
      design. As a rule, impeccable taste springs partly from inborn sensitivity:
      from feeling. But feelings remain rather unproductive unless they can inspire a
      secure judgment. Feelings have to mature into knowledge about the consequences
      of formal decisions. For this reason, there are no born masters of typography,
      but self- education may lead in time to mastery.
    </p>
    <p class="lh-copy measure">
      It is wrong to say that there is no arguing about taste when it is good taste
      that is in question. We are not born with good taste, nor do we come into this
      world equipped with a real understanding of art. Merely to recognize who or
      what is represented in a picture has little to do with a real under- standing
      of art. Neither has an uninformed opinion about the proportions of Roman
      letters. In any case, arguing is senseless. He who wants to convince has to
      do a better job than others.
    </p>
  </div>
</article>
      """

    'Articles Photo Essay':
      'prefix': 'photo-essay'
      'body': """
      <article class="helvetica pb5">
  <header class="vh-100 bg-light-pink dt w-100">
    <div 
      style="background:url(http://mrmrs.io/photos/display.jpg) no-repeat center right;background-size: cover;" 
      class="dtc v-mid cover ph3 ph4-m ph5-l">
      <h1 class="f2 f-subheadline-l measure lh-title fw9">A Night Taking Photos at San Francisco’s Spooky Ruins of the Sutro Baths</h1>
      <h2 class="f6 fw6 black">A story by Nancy Drew</h2>
    </div>
  </header>
  <div class="serif ph3 ph4-m ph5-l">
    <p class="lh-copy f5 f3-m f1-l measure center pv4">
      On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
    <div class="f5 f3-m lh-copy">
      <div class="cf dt-l w-100 bt b--black-10 pv4">
        <div class="dtc-l v-mid mw6 pr3-l">
          <img class="w-100" src="http://mrmrs.io/photos/009.jpg" alt=""/>
        </div>
        <div class="dtc-l v-mid f6 f5-m f4-l measure-l">
          <p class="measure pv4-l center">
            <span class="fw9 fw4-ns">
              Before it burned to the ground, the structure</span> filled a small beach
            inlet below the Cliff House, also owned by Adolph Sutro at the time.
            Shortly after closing, a fire in 1966 destroyed the building
            while it was in the process of being demolished. All that remains
            of the site are concrete walls, blocked off stairs and
            passageways, and a tunnel with a deep crevice in the middle. The
            cause of the fire was arson. Shortly afterwards, the developer
            left San Francisco and claimed insurance money.
          </p>
        </div>
      </div>
      <div class="cf dn">
        <div class="fl w-100 w-50-l">
          <p class="f5 pv4">
            During high tides, water would flow directly into the pools from the
            nearby ocean, recycling the <span class="db f4 f3-m f1-l fw6 measure lh-title">two million US gallons of water in about an hour. </span>
          </p>
        </div>
        <div class="fl w-100 w-50-l">
          <p class="f5">
            During low tides, a powerful turbine water pump,
            built inside a cave at sea level, could be switched on from a control
            room and could fill the tanks at a rate of 6,000 US gallons a minute, 
            recycling all the water in five hours.
          </p>
        </div>
      </div>
      <div class="cf">
        <div class="fl w-100 w-50-l pr2-l pb3"> 
          <img class="db w-100" src="http://mrmrs.io/photos/010.jpg">
        </div>
        <div class="fl w-50 w-50-l pr1 pr0-l pl2-l pb3"> 
          <img class="db w-100" src="http://mrmrs.io/photos/011.jpg">
        </div>
        <div class="fl w-50 w-50-l pl2 pl0-l pr2-l pb3"> 
          <img class="db w-100" src="http://mrmrs.io/photos/012.jpg">
        </div>
        <div class="fl w-100 w-50-l pl2-l"> 
          <img class="db w-100" src="http://mrmrs.io/photos/013.jpg">
        </div>
      </div>
    </div>
  </div>
</article>
      """

    'Articles Pull Quote':
      'prefix': 'pull-quote'
      'body': """
      <article class="athelas pa4">
  <p class="f6 f4-ns lh-copy measure center">
    The form of our letters, the older handwriting and inscriptions as much as
    the cuttings in use today, reflects a convention that has slowly solidified,
    an agreement hardened in many battles. Even after the Renaissance several
    European countries retained broken, blackletter national scripts in opposition to roman, the obligatory type for all Latin material; yet even today, I hope, the last word about Fraktur has not been spoken. 
  </p>
  <blockquote class="ph0 f4 f1-ns measure-narrow center">
    <p class="fw9 lh-copy lh-title-ns">The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty. 
    </p>
  </blockquote>
  <p class="f6 f4-ns lh-copy measure center">
    Apart from that, the roman minuscule has been our way of writing for hundreds
    of years. What followed were merely fashionable variations, here and there even
    deformations, of the noble basic form, but no improvement whatever. The
    punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in
    their clarity, readability and beauty. Garamond appeared on the scene at a
    time when the occidental book, as an object, cast off its medieval
    ponderousness and took up the form which today is still the best: the slender
    and upright rectangular body, comprising folded sheets stitched or sewn at
    the back, in a cover whose protruding edges protect the trimmed pages.
  </p>

</article>
      """

    'Articles Single Column Large Title':
      'prefix': 'single-column-large-title'
      'body': """
      <article class="baskerville pb5">
  <header class="avenir tc-l ph3 ph4-ns pt4 pt5-ns">
    <h1 class="f3 f2-m f-subheadline-l measure lh-title fw1 mt0">A Night of Taking Photos at the Spooky Ruins of the Sutro Baths</h1>
    <time class="f5 f4-l db fw1 baskerville mb4"> March 19th, 2015</time>
    <img class="w-100 dib measure f3" src="http://mrmrs.io/photos/009.jpg" alt="A photo of sutro baths by Adam Morse"/>
  </header>
  <div class="ph3 ph4-m ph5-l">
    <p class="f4 mb4 center measure lh-copy">
      On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
    <div class="measure db center f5 f4-ns lh-copy">
      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/013.jpg">
      <p>
        Before it burned to the ground, the structure filled a small beach
        inlet below the Cliff House, also owned by Adolph Sutro at the time.
        Shortly after closing, a fire in 1966 destroyed the building
        while it was in the process of being demolished. 
      </p>
      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/012.jpg">
      <p>
        During high tides, water would flow directly into the pools from the
        nearby ocean, recycling the two million US gallons of water in about an hour. 
      </p>
      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/010.jpg">
      <p>
        All that remains
        of the site are concrete walls, blocked off stairs and
        passageways, and a tunnel with a deep crevice in the middle. The
        cause of the fire was arson. Shortly afterwards, the developer
        left San Francisco and claimed insurance money.
      </p>
      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/011.jpg">
      <p>
        During low tides, a powerful turbine water pump,
        built inside a cave at sea level, could be switched on from a control
        room and could fill the tanks at a rate of 6,000 US gallons a minute, 
        recycling all the water in five hours.
      </p>
    </div>
  </div>
</article>
      """

    'Articles Title Text Image':
      'prefix': 'title-text-image'
      'body': """
      <article class="pa3 pa5-ns">
  <h1 class="f2">Title Text with Image</h1>
  <img src="/img/space.jpg" class="w-100 f5 measure" alt="outer space">
  <p class="measure lh-copy">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
  <p class="measure lh-copy">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</article>
      """

    'Articles Title Text':
      'prefix': 'title-text'
      'body': """
      <article class="pa3 pa5-ns">
  <h1 class="">Title</h1>
  <p class="measure lh-copy">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
  <p class="measure lh-copy">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</article>
      """

    'Banners Basic':
      'prefix': 'basic'
      'body': """
      <article class="mw7 center ph3 ph5-ns tc br2 pv5 bg-washed-green dark-green mb5">
  <h1 class="fw6 f3 f2-ns lh-title mt0 mb3">
    This is a tagline. For x.
  </h1> 
  <h2 class="fw2 f4 lh-copy mt0 mb3">
    This will change things. And we want you to be involved. This text needs to
    be longer for testing sake.
  </h2>
  <p class="fw1 f5 mt0 mb3">
    Sign up for beta access or learn more about x.
  </p>
  <div>
    <a class="f6 br-pill bg-dark-green no-underline washed-green ba b--dark-green grow pv2 ph3 dib mr3" 
      href="#">
      Sign Up
    </a>
    <a class="f6 br-pill dark-green no-underline ba grow pv2 ph3 dib" 
      href="#">
      Learn More
    </a>
  </div>
</article>
      """

    'Buttons Basic':
      'prefix': 'basic'
      'body': """
      <div class="ph3">
  <h1 class="f6 fw6 ttu tracked">Basic button</h1>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3 mb4">
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
      """

    'Buttons Pill Grow':
      'prefix': 'pill-grow'
      'body': """
      <div class="ph3">
  <h1 class="f6 fw6 ttu tracked">Basic pill</h1>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Pill with Thin Border</h1>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Pill with Border</h1>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Pill with Thick Border</h1>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3 mb4">
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
      """

    'Buttons Pill':
      'prefix': 'pill'
      'body': """
      <div class="ph3">
  <h1 class="f6 fw6 ttu tracked">Basic pill</h1>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Pill with Thin Border</h1>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Pill with Border</h1>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
<div class="ph3 mt4">
  <h1 class="f6 fw6 ttu tracked">Pill with Thick Border</h1>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
</div>
<div class="ph3">
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
<div class="ph3 mb4">
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
</div>
      """

    'Cards Album Centered':
      'prefix': 'album-centered'
      'body': """
      <a class="dib mw5 tc black link dim"
   title="Frank Ocean's Blonde on Apple Music"
   href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">

  <img class="db ba b--black-10"/
       alt="Frank Ocean Blonde Album Cover"
       src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
  >

  <dl class="mt2 f6 lh-copy">
    <dt class="clip">Title</dt>
    <dd class="ml0">Blonde</dd>
    <dt class="clip">Artist</dt>
    <dd class="ml0 gray">Frank Ocean</dd>
  </dl>
</a>
      """

    'Cards Album Left':
      'prefix': 'album-left'
      'body': """
      <a class="dib mw5 black link dim"
   title="Frank Ocean's Blonde on Apple Music"
   href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">

  <img class="db ba b--black-10"/
       alt="Frank Ocean Blonde Album Cover"
       src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
  >

  <dl class="mt2 f6 lh-copy">
    <dt class="clip">Title</dt>
    <dd class="ml0 fw9">Blonde</dd>
    <dt class="clip">Artist</dt>
    <dd class="ml0 gray">Frank Ocean</dd>
  </dl>
</a>
      """

    'Cards News Card':
      'prefix': 'news-card'
      'body': """
      <article class="bg-white center mw5 ba b--black-10 mv4">
  <div class="pv2 ph3">
     <h1 class="f6 ttu tracked">Daily News Co.</h1>
  </div>
  <img src="/img/cat-720.jpg" class="w-100 db" alt="Cat yawning">
  <div class="pa3">
    <a href="#" class="link dim lh-title">15 things every cat owner should know</a>
    <small class="gray db pv2">AMP - <time>6 hours ago</time></small>
  </div>
</article>
      """

    'Cards Product Card':
      'prefix': 'product-card'
      'body': """
      <article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="kitty">
  <div class="pa2 ph3-ns pb3-ns">
    <div class="dt w-100 mt1">
      <div class="dtc">
        <h1 class="f5 f4-ns mv0">Cat</h1>
      </div>
      <div class="dtc tr">
        <h2 class="f5 mv0">$1,000</h2>
      </div>
    </div>
    <p class="f6 lh-copy measure mt2 mid-gray">
      If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
      and touch water with paw then recoil in horror.
    </p>
  </div>
</article>
      """

    'Cards Profile Card Title Subtitle':
      'prefix': 'profile-card-title-subtitle'
      'body': """
      <article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
  <div class="tc">
    <img src="/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Kitty staring at you">
    <h1 class="f3 mb2">Mimi W.</h1>
    <h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
  </div>
</article>
      """

    'Cards Profile Card':
      'prefix': 'profile-card'
      'body': """
      <article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
  <div class="tc">
    <img src="/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Kitty staring at you">
    <h1 class="f4">Mimi Whitehouse</h1>
    <hr class="mw3 bb bw1 b--black-10">
  </div>
  <p class="lh-copy measure center f6 black-70">
    Quite affectionate and outgoing.
    She loves to get chin scratches and will
    roll around on the floor waiting for you give her more of them.
  </p>
</article>
      """

    'Cards Text Card':
      'prefix': 'text-card'
      'body': """
      <article class="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
  <h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">Title of card</h1>
  <div class="pa3 bt b--black-10">
    <p class="f6 f5-ns lh-copy measure">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
      vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </div>
</article>
      """

    'Collections Albums':
      'prefix': 'albums'
      'body': """
      <article>
  <h2 class="f3 fw4 pa3 mv0">Albums</h2>
  <div class="cf pa2">
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is4.mzstatic.com/image/thumb/Music62/v4/93/8f/75/938f7536-0188-f9ba-4585-0a77ceaebf0a/source/400x40000bb.png" alt="Frank Ocean Blonde Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Blonde</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Frank Ocean</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/jeffery/id1146718343?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is1.mzstatic.com/image/thumb/Music71/v4/c8/2d/b1/c82db1cd-9dc5-d7cb-2a34-735cf47bb809/source/400x40000bb.png" alt="Young Thug - Jeffery" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100 ttu">Jeffery</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Young Thug</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/untitled-unmastered./id1089846273?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is5.mzstatic.com/image/thumb/Music49/v4/1b/36/43/1b3643c6-e6a3-41bc-7f6d-7c2b64b5d60b/source/400x40000bb.png" alt="Kendrick Lamar untitled unmastered. Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">untitled umastered.</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Kendrick Lamar</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/99.9/id1092026376?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is4.mzstatic.com/image/thumb/Music49/v4/e9/4c/2d/e94c2d5f-bdb0-c565-4cc2-f9dfcf7f0b87/source/400x40000bb.png" alt="Kaytranada 99%" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">99%</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Kaytranada</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/aa/id1067924003?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is3.mzstatic.com/image/thumb/Music49/v4/b6/b0/a1/b6b0a1dd-998d-9786-ca2f-87470be15250/source/400x40000bb.png" alt="Baauer Aa - Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Aa</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Baauer</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/99-cents/id1054734475?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is3.mzstatic.com/image/thumb/Music62/v4/fa/ae/a6/faaea65f-0819-bb5d-afaa-4f5e84015204/source/400x40000bb.png" alt="Santigold 99 cents - Album cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">99 cents</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Santigold</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/a-moon-shaped-pool/id1111577743?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is2.mzstatic.com/image/thumb/Music18/v4/34/03/34/34033451-12e2-2d0b-c100-11a390922a01/source/400x40000bb.png" alt="A Moon Shaped Pool - Album cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">A Moon Shaped Pool</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Radiohead</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/the-life-of-pablo/id1123231885?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is3.mzstatic.com/image/thumb/Music20/v4/c0/98/d0/c098d05b-7bcc-0ea3-0213-0f69992fda65/source/400x40000bb.png" alt="The Life of Pablo - Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">The Life of Pablo</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Kanye West</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/coloring-book/id1113239004?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is2.mzstatic.com/image/thumb/Music18/v4/5a/42/0f/5a420f73-6490-abc9-bdcc-3001d5c4e9fc/source/400x40000bb.png" alt="Coloring Book - Album cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Coloring Book</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Chance the Rapper</dd>
        </dl>
      </a>
    </div>
    <div class="fl w-50 w-25-m w-20-l pa2">
      <a href="https://geo.itunes.apple.com/us/album/everybody-looking/id1135576036?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
        <img src="http://is4.mzstatic.com/image/thumb/Music30/v4/9b/2e/e1/9b2ee13e-35fd-0cc1-d203-e65b4beafc7f/source/400x40000bb.png" alt="Everybody Looking - Album Cover" class="w-100 db outline black-10"/>
        <dl class="mt2 f6 lh-copy">
          <dt class="clip">Title</dt>
          <dd class="ml0 black truncate w-100">Everybody Looking</dd>
          <dt class="clip">Artist</dt>
          <dd class="ml0 gray truncate w-100">Gucci Mane</dd>
        </dl>
      </a>
    </div>
  </div>
</article>
      """

    'Collections Movies':
      'prefix': 'movies'
      'body': """
      <article>
  <a href="https://geo.itunes.apple.com/us/movie/primer/id536457427?at=1l3vqFJ&ct=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/primer.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/the-big-short/id1061320456?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/the-big-short.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/bottle-rocket/id315360821?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/bottlerocket.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/ex-machina/id983488795?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6" style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/ex-machina.png) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/district-9/id331251689?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 pv" style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/district9.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/watchmen-directors-cut/id321123507?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/watchmen.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/sunshine/id272508664?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/sunshine.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/mad-max-fury-road/id990549112?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/mad-max-2.png) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/drive/id492170756?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/neon-drive.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/kill-bill-volume-1/id432516627?at=1l3vqFJ&mt=6
    " class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/kill-bill.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/kill-bill-volume-2/id432516575?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/kill-bill2.png) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/from-dusk-till-dawn/id461537388?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/dusktilldawn.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/jurassic-park/id452283395?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/jurassicpark.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/the-place-beyond-the-pines/id641999831?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/place-beyond-pines.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/children-of-men/id299968409?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/children.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/prometheus/id547496947?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/prometheus.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/inglourious-basterds/id333325378?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/inglourious_basterds.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/moon/id331842140?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/moon.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/lock-stock-two-smoking-barrels/id281827014?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/lockstock.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/interstellar/id960891136?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/interstellar.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/12-monkeys/id280241027?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/12monkeys.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/the-professional/id270815716?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/leon.png) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/the-departed/id284563157?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/departed.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
  <a href="https://geo.itunes.apple.com/us/movie/batman-begins/id271469254?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
    <div class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/batman-begins.jpg) no-repeat center center; background-size: cover;"></div>
  </a>
</article>
      """

    'Collections Posters':
      'prefix': 'posters'
      'body': """
      <main class="cf pa2">
    <div class="fl w-100 w-50-ns ph2">
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/elevaters030211_960.jpg"></a>
      <a href="" class="no-underline pv2 grow db"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/elevaters.jpg"></a>
      <a href="#" class="no-underline pv2 grow db"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/pink-and-noseworthy-22.12.10-cargo_960.jpg"/></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw090911_960.jpg"></a>
    </div>
    <div class="fl w-50 w-25-ns ph2">
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-031209_960-2.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw-080411-cargo_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw18-240112-cc_960.jpg"> </a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw-residency-cargo_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/orchid-2-mnkr_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/O270711_960-2.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-020510_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-130610_960.jpg"></a>
    </div>
    <div class="fl w-50 w-25-ns ph2">
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/zach-hurd-101218_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/zh170311.4.cargo_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hwspringtour-cargo_960-1.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/cc-shanee_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/ZachHurd-190111s_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw170211pie-cargo_960.jpg"></a>
      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-191110_960.jpg"></a>
    </div>
</main>
      """

    'Collections Square Title Subtitle':
      'prefix': 'square-title-subtitle'
      'body': """
      <section class="cf w-100 pa2-ns">
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
      class="db bg-center cover aspect-ratio--object" />
    </div>
    <a href="#0" class="ph2 ph0-ns pb3 link db">
      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
    </a>
  </article>
</section>
      """

    'Footers Simple Large Type':
      'prefix': 'simple-large-type'
      'body': """
      <footer class="ph3 ph4-ns pv6 bt b--black-10 black-70">
  <a href="mailto:" class="link b f3 f2-ns dim black-70 lh-solid">[email protected]</a>
  <p class="f6 db b ttu lh-solid">© 2016 COMPANY Inc.</p>
  <div class="mt5">
    <a href="/language/" title="Language" class="f6 dib pr2 mid-gray dim">Language</a>
    <a href="/terms/"    title="Terms" class="f6 dib ph2 mid-gray dim">Terms of Use</a>
    <a href="/privacy/"  title="Privacy" class="f6 dib pl2 mid-gray dim">Privacy</a>
  </div>
</footer>
      """

    'Footers Small Print':
      'prefix': 'small-print'
      'body': """
      <footer class="pv4 ph3 ph5-m ph6-l mid-gray">
  <small class="f6 db tc">© 2016 <b class="ttu">SOME COMPANY Inc</b>., All Rights Reserved</small>
  <div class="tc mt3">
    <a href="/language/" title="Language" class="f6 dib ph2 link mid-gray dim">Language</a>
    <a href="/terms/"    title="Terms" class="f6 dib ph2 link mid-gray dim">Terms of Use</a>
    <a href="/privacy/"  title="Privacy" class="f6 dib ph2 link mid-gray dim">Privacy</a>
  </div>
</footer>
      """

    'Footers Social Circles':
      'prefix': 'social-circles'
      'body': """
      <footer class="pv4 ph3 ph5-ns tc">
  <a class="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
    <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>facebook icon</title>
      <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
    </svg>
  </a>
  <a class="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
    <svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>twitter icon</title>
      <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
    </svg>
  </a>
  <a class="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
    <svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>github icon</title>
      <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
    </svg>
  </a>
  <a class="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
    <svg data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>dribbble icon</title>
      <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
    </svg>
  </a>
</footer>
      """

    'Footers Social Text':
      'prefix': 'social-text'
      'body': """
      <footer class="pv4 ph3 ph5-ns tc">
  <a class="link dim gray dib h2 w3 br-100 mr3 " href="#" title="">
    <svg class="w2" data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>facebook icon</title>
      <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
    </svg>
    <small class="db tc">Facebook</small>
  </a>
  <a class="link dim gray dib h2 w3 br-100 mr3 " href="#" title="">
    <svg class="w2" data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>twitter icon</title>
      <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
    </svg>
    <small class="db tc">Twitter</small>
  </a>
  <a class="link dim gray dib br-100 h2 w3 mr3 " href="#" title="">
    <svg class="w2" data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>github icon</title>
      <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
    </svg>
    <small class="db tc">GitHub</small>
  </a>
  <a class="link dim gray dib br-100 h2 w3 mr3 " href="#" title="">
    <svg class="w2" data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>dribbble icon</title>
      <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
    </svg>
      <small class="db tc">Dribbble</small>
  </a>
</footer>
      """

    'Footers Social':
      'prefix': 'social'
      'body': """
      <footer class="pv4 ph3 ph5-ns tc">
  <a class="link dim gray dib h2 w2 br-100 mr3 " href="#" title="">
    <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>facebook icon</title>
      <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
    </svg>
  </a>
  <a class="link dim gray dib h2 w2 br-100 mr3 " href="#" title="">
    <svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>twitter icon</title>
      <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
    </svg>
  </a>
  <a class="link dim gray dib br-100 h2 w2 mr3 " href="#" title="">
    <svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>github icon</title>
      <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
    </svg>
  </a>
  <a class="link dim gray dib br-100 h2 w2 mr3 " href="#" title="">
    <svg data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>dribbble icon</title>
      <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
    </svg>
  </a>
  <div class="mt4">
    <a href="#" class="f6 link dim gray dib mr3 mr4-ns">Help</a>
    <a href="#" class="f6 link dim gray dib mr3 mr4-ns">Send feedback</a>
    <a href="#" class="f6 link dim gray dib mr3 mr4-ns">Privacy</a>
    <a href="#" class="f6 link dim gray dib">Terms</a>
  </div>
</footer>
      """

    'Forms Sign In':
      'prefix': 'sign-in'
      'body': """
      <main class="pa4 black-80">
  <form class="measure center">
    <fieldset id="sign_up" class="ba b--transparent ph0 mh0">
      <legend class="f4 fw6 ph0 mh0">Sign In</legend>
      <div class="mt3">
        <label class="db fw6 lh-copy f6" for="email-address">Email</label>
        <input class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address"  id="email-address">
      </div>
      <div class="mv3">
        <label class="db fw6 lh-copy f6" for="password">Password</label>
        <input class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password">
      </div>
      <label class="pa0 ma0 lh-copy f6 pointer"><input type="checkbox"> Remember me</label>
    </fieldset> 
    <div class="">
      <input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Sign in">
    </div>
    <div class="lh-copy mt3">
      <a href="#0" class="f6 link dim black db">Sign up</a>
      <a href="#0" class="f6 link dim black db">Forgot yor password?</a>
    </div>
  </form>
</main>
      """

    'Forms Sign Up':
      'prefix': 'sign-up'
      'body': """
      <article class="pa4 black-80">
  <form action="sign-up_submit" method="get" accept-charset="utf-8">
    <fieldset id="sign_up" class="ba b--transparent ph0 mh0">
      <legend class="ph0 mh0 fw6 clip">Sign Up</legend>
      <div class="mt3">
        <label class="db fw4 lh-copy f6" for="email-address">Email address</label>
        <input class="pa2 input-reset ba bg-transparent w-100 measure" type="email" name="email-address"  id="email-address">
      </div>
      <div class="mt3">
        <label class="db fw4 lh-copy f6" for="password">Password</label>
        <input class="b pa2 input-reset ba bg-transparent" type="password" name="password"  id="password">
      </div>
    </fieldset> 
    <div class="mt3"><input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6" type="submit" value="Sign Up"></div>
  </form>
</article>
      """

    'Headers Circle Avatar Title Subtitle':
      'prefix': 'circle-avatar-title-subtitle'
      'body': """
      <header class="tc pv4 pv5-ns">
  <img src="/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
  <h1 class="f5 f4-ns fw6 mid-gray">Jasper Whitehouse</h1>
  <h2 class="f6 gray fw2 ttu tracked">Los Angeles</h2>
</header>
      """

    'Headers Fixed Semi Transparent':
      'prefix': 'fixed-semi-transparent'
      'body': """
      <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
  <nav class="f6 fw6 ttu tracked">
    <a class="link dim white dib mr3" href="#" title="Home">Home</a>
    <a class="link dim white dib mr3" href="#" title="About">About</a>
    <a class="link dim white dib mr3" href="#" title="Store">Store</a>
    <a class="link dim white dib" href="#" title="Contact">Contact</a>
  </nav>
</header>
      """

    'Headers Rounded Avatar Title Subtitle':
      'prefix': 'rounded-avatar-title-subtitle'
      'body': """
      <header class="tc pv4 pv5-ns">
  <img src="/img/logo.jpg" class="br3 ba b--black-10 h3 w3" alt="avatar">
  <h1 class="f5 f4-ns fw6 black-70">Jasper Whitehouse</h1>
  <h2 class="f6 black-70 fw2 ttu tracked">Los Angeles</h2>
</header>
      """

    'Headers Startup Hero':
      'prefix': 'startup-hero'
      'body': """
      <header class="sans-serif">
  <div class="cover bg-left bg-center-l" style="background-image: url(http://mrmrs.io/photos/u/011.jpg)">
    <div class="bg-black-80 pb5 pb6-m pb7-l">
      <nav class="dt w-100 mw8 center"> 
        <div class="dtc w2 v-mid pa3">
          <a href="/" class="dib w2 h2 pa1 ba b--white-90 grow-large border-box">
            <svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
          </a>
        </div>
        <div class="dtc v-mid tr pa3">
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >How it Works</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >Pricing</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >About</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >Careers</a> 
          <a class="f6 fw4 hover-white no-underline white-70 dib ml2 pv2 ph3 ba" href="/" >Sign Up</a> 
        </div>
      </nav> 
      <div class="tc-l mt4 mt5-m mt6-l ph3">
        <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">This is your super impressive headline</h1>
        <h2 class="fw1 f3 white-80 mt3 mb4">Now a subheadline where explain your wonderful new startup even more</h2>
        <a class="f6 no-underline grow dib v-mid bg-blue white ba b--blue ph3 pv2 mb3" href="/">Call to Action</a>
        <span class="dib v-mid ph3 white-70 mb3">or</span>
        <a class="f6 no-underline grow dib v-mid white ba b--white ph3 pv2 mb3" href="">Secondary call to action</a>
      </div>
    </div>
  </div> 
</header>
      """

    'Layout Aspect Ratio 16x9':
      'prefix': 'aspect-ratio-16x9'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--16x9 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 1x1':
      'prefix': 'aspect-ratio-1x1'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--1x1 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 3x4':
      'prefix': 'aspect-ratio-3x4'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--3x4 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 4x3':
      'prefix': 'aspect-ratio-4x3'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--4x3 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 4x6':
      'prefix': 'aspect-ratio-4x6'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--4x6 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 5x7':
      'prefix': 'aspect-ratio-5x7'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--5x7 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 5x8':
      'prefix': 'aspect-ratio-5x8'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--5x8 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 6x4':
      'prefix': 'aspect-ratio-6x4'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--6x4 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 7x5':
      'prefix': 'aspect-ratio-7x5'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--7x5 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 8x5':
      'prefix': 'aspect-ratio-8x5'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--8x5 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Aspect Ratio 9x16':
      'prefix': 'aspect-ratio-9x16'
      'body': """
      <article class="mw5 mw6-ns center pt4">
  <div class="aspect-ratio aspect-ratio--9x16 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Centered Container':
      'prefix': 'centered-container'
      'body': """
      <section class="mw5 mw7-ns center bg-light-gray pa3 ph5-ns">
  <h1 class="mt0">Centered Container</h1>
  <p class="lh-copy measure">
    Combine width or max-width values with the center class to create a centered
    container for your content.
  </p>
</section>
      """

    'Layout Five Column Collapse Alternate':
      'prefix': 'five-column-collapse-alternate'
      'body': """
      <div class="cf">
  <div class="fl w-50 w-20-ns tc pv5 bg-black-05">
    1
  </div>
  <div class="fl w-50 w-20-ns tc pv5 bg-black-10">
    2
  </div>
  <div class="fl w-100 w-20-ns tc pv5 bg-black-20">
    3
  </div>
  <div class="fl w-50 w-20-ns tc pv5 bg-black-10">
    4
  </div>
  <div class="fl w-50 w-20-ns tc pv5 bg-black-05">
    5
  </div>
</div>
      """

    'Layout Five Column Collapse Asymmetrical':
      'prefix': 'five-column-collapse-asymmetrical'
      'body': """
      <div class="cf">
  <div class="fl w-100 w-20-l tc pv5 bg-black-20">
    1
  </div>
  <div class="fl w-25 w-20-l tc pv5 bg-black-10">
    2
  </div>
  <div class="fl w-75 w-20-l tc pv5 bg-black-05">
    3
  </div>
  <div class="fl w-75 w-20-l tc pv5 bg-black-10">
    4
  </div>
  <div class="fl w-25 w-20-l tc pv5 bg-black-05">
    5
  </div>
</div>
      """

    'Layout Five Column Collapse Mixed':
      'prefix': 'five-column-collapse-mixed'
      'body': """
      <div class="cf">
  <div class="fl w-100 w-20-ns tc pv5 bg-black-20">
    1
  </div>
  <div class="fl w-25 w-20-ns tc pv5 bg-black-10">
    2
  </div>
  <div class="fl w-25 w-20-ns tc pv5 bg-black-05">
    3
  </div>
  <div class="fl w-25 w-20-ns tc pv5 bg-black-10">
    4
  </div>
  <div class="fl w-25 w-20-ns tc pv5 bg-black-05">
    5
  </div>
</div>
      """

    'Layout Five Column Collapse One':
      'prefix': 'five-column-collapse-one'
      'body': """
      <div class="cf">
  <div class="fl w-100 w-20-ns tc pv5 bg-black-05">
    1
  </div>
  <div class="fl w-100 w-20-ns tc pv5 bg-black-10">
    2
  </div>
  <div class="fl w-100 w-20-ns tc pv5 bg-black-20">
    3
  </div>
  <div class="fl w-100 w-20-ns tc pv5 bg-black-10">
    4
  </div>
  <div class="fl w-100 w-20-ns tc pv5 bg-black-05">
    5
  </div>
</div>
      """

    'Layout Five Column':
      'prefix': 'five-column'
      'body': """
      <div class="cf">
  <div class="fl w-20 tc pv5 bg-black-05">
    1
  </div>
  <div class="fl w-20 tc pv5 bg-black-10">
    2
  </div>
  <div class="fl w-20 tc pv5 bg-black-05">
    3
  </div>
  <div class="fl w-20 tc pv5 bg-black-10">
    4
  </div>
  <div class="fl w-20 tc pv5 bg-black-05">
    5
  </div>
</div>
      """

    'Layout Fixed Table Layout Grid Mixed Rows':
      'prefix': 'fixed-table-layout-grid-mixed-rows'
      'body': """
      <div class="dt dt--fixed">
  <div class="dt-row">
    <div class="dtc tc pv4 bg-black-10">
      1
    </div>
    <div class="dtc tc pv4 bg-black-05">
      2
    </div>
    <div class="dtc tc pv4 bg-black-10">
      3
    </div>
  </div>
  <div class="dt-row">
    <div class="dtc tc pv4 white bg-black">
      1
    </div>
    <div class="dtc tc pv4 white bg-black-70">
      2
    </div>
    <div class="dtc tc pv4 white bg-black">
      3
    </div>
    <div class="dtc tc pv4 white bg-black-70">
      4
    </div>
    <div class="dtc tc pv4 white bg-black">
      5
    </div>
    <div class="dtc tc pv4 white bg-black-70">
      6
    </div>
    <div class="dtc tc pv4 white bg-black">
      7
    </div>
    <div class="dtc tc pv4 white bg-black-70">
      8
    </div>
    <div class="dtc tc pv4 white bg-black">
      9
    </div>
  </div>
  <div class="dt-row">
    <div class="dtc tc pv4 bg-black-10">
      1
    </div>
    <div class="dtc tc pv4 bg-black-05">
      2
    </div>
    <div class="dtc tc pv4 bg-black-10">
      3
    </div>
    <div class="dtc tc pv4 bg-black-10">
      4
    </div>
    <div class="dtc tc pv4 bg-black-05">
      5
    </div>
    <div class="dtc tc pv4 bg-black-10">
      6
    </div>
  </div>
</div>
      """

    'Layout Fixed Table Layout Grid':
      'prefix': 'fixed-table-layout-grid'
      'body': """
      <div class="dt dt--fixed">
  <div class="dtc tc pv4 bg-black-10">
    1
  </div>
  <div class="dtc tc pv4 bg-black-05">
    2
  </div>
  <div class="dtc tc pv4 bg-black-10">
    3
  </div>
</div>
<div class="dt dt--fixed">
  <div class="dtc tc pv4 white bg-black">
    1
  </div>
  <div class="dtc tc pv4 white bg-black-70">
    2
  </div>
  <div class="dtc tc pv4 white bg-black">
    3
  </div>
  <div class="dtc tc pv4 white bg-black-70">
    4
  </div>
  <div class="dtc tc pv4 white bg-black">
    5
  </div>
  <div class="dtc tc pv4 white bg-black-70">
    6
  </div>
  <div class="dtc tc pv4 white bg-black">
    7
  </div>
  <div class="dtc tc pv4 white bg-black-70">
    8
  </div>
  <div class="dtc tc pv4 white bg-black">
    9
  </div>
</div>
<div class="dt dt--fixed">
  <div class="dtc tc pv4 bg-black-10">
    1
  </div>
  <div class="dtc tc pv4 bg-black-05">
    2
  </div>
  <div class="dtc tc pv4 bg-black-10">
    3
  </div>
  <div class="dtc tc pv4 bg-black-10">
    4
  </div>
  <div class="dtc tc pv4 bg-black-05">
    5
  </div>
  <div class="dtc tc pv4 bg-black-10">
    6
  </div>
</div>
      """

    'Layout Flag Object Bottom':
      'prefix': 'flag-object-bottom'
      'body': """
      <div class="dt mw6 center pv4 pv5-m pv6-ns">
  <div class="dtc v-btm">
    <img src="/img/super-wide.jpg" alt="A bright blue sky" class="mw5 db" />
  </div>
  <div class="dtc v-btm pl3">
    <p class="lh-copy mv0">
      This text is aligned to the bottom, no matter what the height of the image is.
    </p>
  </div>
</div>
      """

    'Layout Flag Object Collapse':
      'prefix': 'flag-object-collapse'
      'body': """
      <div class="dt mw6 center pt0 pb5 pv5-m pv6-ns">
  <div class="db dtc-ns v-mid-ns">
    <img src="/img/super-wide.jpg" alt="A bright blue sky" class="w-100 mw7 w5-ns" />
  </div>
  <div class="db dtc-ns v-mid ph2 pr0-ns pl3-ns">
    <p class="lh-copy">
      For desktop, this text is vertically aligned middle, no matter what the height of the image is.
      On mobile, this is a paragraph below an image.
    </p>
  </div>
</div>
      """

    'Layout Flag Object Top':
      'prefix': 'flag-object-top'
      'body': """
      <div class="dt mw6 center pv4 pv5-m pv6-ns">
  <div class="dtc v-top">
    <img src="/img/super-wide.jpg" alt="A bright blue sky" class="mw5 db" />
  </div>
  <div class="dtc v-top pl3">
    <p class="lh-copy mv0">
      This text is aligned to the top, no matter what the height of the
      image is.
    </p>
  </div>
</div>
      """

    'Layout Flag Object':
      'prefix': 'flag-object'
      'body': """
      <div class="dt mw6 center pv4 pv5-m pv6-ns">
  <div class="dtc v-mid">
    <img src="/img/super-wide.jpg" alt="A bright blue sky" class="mw5" />
  </div>
  <div class="dtc v-mid pl3">
    <p class="lh-copy">
      This text is vertically aligned middle, no matter what the height of the image is.
    </p>
  </div>
</div>
      """

    'Layout Four Column Collapse Two Collapse One':
      'prefix': 'four-column-collapse-two-collapse-one'
      'body': """
      <section class="cf">
  <div class="fl w-100 w-50-m w-25-l bg-black-10 tc pv4">1</div>
  <div class="fl w-100 w-50-m w-25-l bg-black-05 tc pv4">2</div>
  <div class="fl w-100 w-50-m w-25-l bg-black-20 tc pv4">3</div>
  <div class="fl w-100 w-50-m w-25-l bg-black-30 tc pv4">4</div>
</section>
      """

    'Layout Four Column Collapse Two':
      'prefix': 'four-column-collapse-two'
      'body': """
      <section class="cf">
  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/1.jpg" alt="night sky over house"></div>
  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/2.jpg" alt="night sky over water"></div>
  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/3.jpg" alt="bay bridge at night"></div>
  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/4.jpg" alt="night sky over land"></div>


</section>
      """

    'Layout Four Column':
      'prefix': 'four-column'
      'body': """
      <div class="cf">
  <div class="fl w-25 tc pv5 bg-black-05">
    1
  </div>
  <div class="fl w-25 tc pv5 bg-black-025">
    2
  </div>
  <div class="fl w-25 tc pv5 bg-black-05">
    3
  </div>
  <div class="fl w-25 tc pv5 bg-black-025">
    4
  </div>
</div>
      """

    'Layout Full Bleed 16x9':
      'prefix': 'full-bleed-16x9'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--16x9">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 4x6':
      'prefix': 'full-bleed-4x6'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--4x6">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 5x7':
      'prefix': 'full-bleed-5x7'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x7">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 5x8':
      'prefix': 'full-bleed-5x8'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--5x8">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 6x4':
      'prefix': 'full-bleed-6x4'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--6x4">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 7x5':
      'prefix': 'full-bleed-7x5'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--7x5">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 8x5':
      'prefix': 'full-bleed-8x5'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--8x5">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed 9x16':
      'prefix': 'full-bleed-9x16'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--9x16">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Bleed Square':
      'prefix': 'full-bleed-square'
      'body': """
      <main class="cf w-100">
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0006.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0002.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0003.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0004.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0007.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0008.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0009.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0010.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0011.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0012.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0013.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0014.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0015.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0016.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0017.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0018.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0019.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0020.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0021.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
  <div class="fl w-50 w-third-m w-25-ns">
    <div class="aspect-ratio aspect-ratio--1x1">
      <img style="background-image:url(http://mrmrs.io/images/0022.jpg);" 
        class="db bg-center cover aspect-ratio--object" />
    </div>
  </div>
</main>
      """

    'Layout Full Screen Centered Title':
      'prefix': 'full-screen-centered-title'
      'body': """
      <article class="vh-100 dt w-100 bg-dark-pink">
  <div class="dtc v-mid tc white ph3 ph4-l">
    <h1 class="f6 f2-m f-subheadline-l fw6 tc">Vertically centering things in css is easy!</h1>
  </div>
</article>
      """

    'Layout Horizontal Aspect Ratios':
      'prefix': 'horizontal-aspect-ratios'
      'body': """
      <article class="mw5 mw7-ns center bg-light-gray pa3 pa5-ns">
  <h4 class="f6">16:9</h4>
  <div class="aspect-ratio aspect-ratio--16x9 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
  <h4 class="f6">8:5</h4>
  <div class="aspect-ratio aspect-ratio--8x5 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
  <h4 class="f6">7:5</h4>
  <div class="aspect-ratio aspect-ratio--7x5 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
  <h4 class="f6">6:4</h4>
  <div class="aspect-ratio aspect-ratio--6x4 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
  <h4 class="f6">4:3</h4>
  <div class="aspect-ratio aspect-ratio--4x3 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
  <h4 class="f6">1:1</h4>
  <div class="aspect-ratio aspect-ratio--1x1 mb4">
    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.io/photos/001.jpg) center;"></div>
  </div>
</article>
      """

    'Layout Three Column Collapse One':
      'prefix': 'three-column-collapse-one'
      'body': """
      <div class="dt-ns dt--fixed-ns">
  <div class="dtc-ns tc pv4 bg-black-10">
    1
  </div>
  <div class="dtc-ns tc pv4 bg-black-05">
    2
  </div>
  <div class="dtc-ns tc pv4 bg-black-10">
    3
  </div>
</div>
      """

    'Layout Three Column':
      'prefix': 'three-column'
      'body': """
      <div class="dt dt--fixed">
  <div class="dtc tc pv4 bg-black-10">
    1
  </div>
  <div class="dtc tc pv4 bg-black-05">
    2
  </div>
  <div class="dtc tc pv4 bg-black-10">
    3
  </div>
</div>
      """

    'Layout Two Column Collapse One':
      'prefix': 'two-column-collapse-one'
      'body': """
      <article class="cf">
  <div class="fl w-100 w-50-ns bg-near-white tc">
    <h1>Column One</h1>
  </div>
  <div class="fl w-100 w-50-ns bg-light-gray tc">
    <h1>Column Two</h1>
  </div>
</article>
      """

    'Layout Two Column':
      'prefix': 'two-column'
      'body': """
      <article class="cf">
  <div class="fl w-50 bg-near-white tc">
    <h1>Column One</h1>
  </div>
  <div class="fl w-50 bg-light-gray tc">
    <h1>Column Two</h1>
  </div>
</article>
      """

    'Lists Border Spaced':
      'prefix': 'border-spaced'
      'body': """
      <article class="pa3 pa5-ns">
  <h1 class="f4 bold center mw6">Cats</h1>
  <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
    <li class="ph3 pv3 bb b--light-silver">Mackeral Tabby</li>
    <li class="ph3 pv3 bb b--light-silver">Burmese</li>
    <li class="ph3 pv3 bb b--light-silver">Orange Tabby</li>
    <li class="ph3 pv3 bb b--light-silver">Maine Coon</li>
    <li class="ph3 pv3 bb b--light-silver">Siamese</li>
    <li class="ph3 pv3 bb b--light-silver">Scottish Fold</li>
    <li class="ph3 pv3">American Bobtail</li>
  </ul>
</article>
      """

    'Lists Border Tight':
      'prefix': 'border-tight'
      'body': """
      <h1 class="f4 bold center mw5">Cats</h1>
<ul class="list pl0 ml0 center mw5 ba b--light-silver br3">
  <li class="ph3 pv2 bb b--light-silver">Mackeral Tabby</li>
  <li class="ph3 pv2 bb b--light-silver">Burmese</li>
  <li class="ph3 pv2 bb b--light-silver">Maine Coon</li>
  <li class="ph3 pv2 bb b--light-silver">Orange Tabby</li>
  <li class="ph3 pv2 bb b--light-silver">Siamese</li>
  <li class="ph3 pv2 bb b--light-silver">Scottish Fold</li>
  <li class="ph3 pv2">American Bobtail</li>
</ul>
      """

    'Lists Items Image Title Price':
      'prefix': 'items-image-title-price'
      'body': """
      <main class="mw6 center">
  <article>
    <a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
      <div class="dtc w3">
        <img src="http://mrmrs.io/images/0010.jpg" class="db w-100"/>
      </div>
      <div class="dtc v-top pl2">
        <h1 class="f6 f5-ns fw6 lh-title black mv0">Grid Systems</h1>
        <h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
        <dl class="mt2 f6">
          <dt class="clip">Price</dt>
          <dd class="ml0">$75.00</dd>
        </dl>
      </div>
    </a>
  </article>
  <article>
    <a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
      <div class="dtc w3">
        <img src="http://mrmrs.io/images/0002.jpg" class="db w-100"/>
      </div>
      <div class="dtc v-top pl2">
        <h1 class="f6 f5-ns fw6 lh-title black mv0">History of the Poster</h1>
        <h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
        <dl class="mt2 f6">
          <dt class="clip">Price</dt>
          <dd class="ml0">$15.00</dd>
        </dl>
      </div>
    </a>
  </article>
  <article>
    <a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
      <div class="dtc w3">
        <img src="http://mrmrs.io/images/0004.jpg" class="db w-100"/>
      </div>
      <div class="dtc v-top pl2">
        <h1 class="f6 f5-ns fw6 lh-title black mv0">Graphic Design in IBM: Typography, Photography, and Illustration</h1>
        <h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
        <dl class="mt2 f6">
          <dt class="clip">Price</dt>
          <dd class="ml0">$15.00</dd>
        </dl>
      </div>
    </a>
  </article>
  <article>
    <a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
      <div class="dtc w3">
        <img src="http://mrmrs.io/images/0006.jpg" class="db w-100"/>
      </div>
      <div class="dtc v-top pl2">
        <h1 class="f6 f5-ns fw6 lh-title black mv0">Fotoplakate: Von den Anfängen</h1>
        <h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
        <dl class="mt2 f6">
          <dt class="clip">Price</dt>
          <dd class="ml0">$15.00</dd>
        </dl>
      </div>
    </a>
  </article>
  <article>
    <a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
      <div class="dtc w3">
        <img src="http://mrmrs.io/images/0030.jpg" class="db w-100"/>
      </div>
      <div class="dtc v-top pl2">
        <h1 class="f6 f5-ns fw6 lh-title black mv0">The Graphic Artist</h1>
        <h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
        <dl class="mt2 f6">
          <dt class="clip">Price</dt>
          <dd class="ml0">$15.00</dd>
        </dl>
      </div>
    </a>
  </article>
  <article class="mt2">
    <a class="link dt w-100 bb b--black-10 dim blue" href="#0">
      <div class="dtc w3">
        <img src="http://mrmrs.io/images/0010.jpg" class="db w-100"/>
      </div>
      <div class="dtc v-top pl2">
        <h1 class="f6 f5-ns fw6 lh-title black mv0">A History of Visual Communication (Geschichte der visuellen Kommunikation)</h1>
        <h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
        <dl class="mt2 f6">
          <dt class="clip">Price</dt>
          <dd class="ml0">$15.00</dd>
        </dl>
      </div>
    </a>
  </article>
</main>
      """

    'Lists Large Links Inline':
      'prefix': 'large-links-inline'
      'body': """
      <ul class="list pa3 pa5-ns">
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Abyssinian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Aegean</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Arabian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Australian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Asian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Balinese</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Bambino</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Bengal</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Birman</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Bombay</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Brazilian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Burmese</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Burmilla</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">California</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Chantilly</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Chartreux</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Chausie</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cheetoh</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Colorpoint</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cornish</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cymric</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cyprus</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Devon</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Donskoy</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Dragon</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Egyptian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">European</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Exotic</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Foldex</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cachorro</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">German</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Havana</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Highlander</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Himalayan</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Japanese</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Javanese</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Kurilian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Khao</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Korat</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Korean</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Korn</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Kurilian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Japan</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">LaPerm</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Lykoi</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Maine</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Manx</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Mekong</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Minskin</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Munchkin</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Nebelung</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Napoleon</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Norwegian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Ocicat</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Ojos</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Oregon</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Oriental</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Oriental</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Oriental</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">PerFold</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Persian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Persian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Peterbald</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Pixie</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Raas</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Ragamuffin</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Ragdoll</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Russian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Russian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Sam</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Savannah</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Scottish</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Selkirk</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Serengeti</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Serrade</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Siamese</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Siberian</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Singapura</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Snowshoe</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Sokoke</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Somali</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Sphynx</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Suphalak</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Thai</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Tonkinese</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Toyger</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Turkish</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Turkish</a></li>
  <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">United</a></li>
</ul>
      """

    'Lists Links Inline':
      'prefix': 'links-inline'
      'body': """
      <ul class="list ph3 ph5-ns pv4">
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Abyssinian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Aegean</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Arabian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Australian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Asian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Balinese</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Bambino</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Bengal</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Birman</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Bombay</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Brazilian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Burmese</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Burmilla</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">California</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Chantilly</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Chartreux</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Chausie</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cheetoh</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Colorpoint</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cornish</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cymric</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cyprus</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Devon</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Donskoy</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Dragon</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Egyptian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">European</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Exotic</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Foldex</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cachorro</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">German</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Havana</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Highlander</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Himalayan</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Japanese</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Javanese</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Kurilian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Khao</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Korat</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Korean</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Korn</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Kurilian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Japan</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">LaPerm</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Lykoi</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Maine</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Manx</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Mekong</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Minskin</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Munchkin</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Nebelung</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Napoleon</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Norwegian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Ocicat</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Ojos</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Oregon</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Oriental</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Oriental</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Oriental</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">PerFold</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Persian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Persian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Peterbald</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Pixie</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Raas</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Ragamuffin</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Ragdoll</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Russian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Russian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Sam</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Savannah</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Scottish</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Selkirk</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Serengeti</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Serrade</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Siamese</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Siberian</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Singapura</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Snowshoe</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Sokoke</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Somali</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Sphynx</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Suphalak</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Thai</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Tonkinese</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Toyger</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Turkish</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Turkish</a></li>
  <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">United</a></li>
</ul>
      """

    'Lists Links With Borders Inline':
      'prefix': 'links-with-borders-inline'
      'body': """
      <ul class="list ph3 ph5-ns pv4">
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Abyssinian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Aegean</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Arabian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Australian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Asian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Balinese</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bambino</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bengal</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Birman</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bombay</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Brazilian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Burmese</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Burmilla</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">California</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chantilly</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chartreux</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chausie</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cheetoh</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Colorpoint</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cornish</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cymric</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cyprus</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Devon</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Donskoy</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Dragon</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Egyptian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">European</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Exotic</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Foldex</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cachorro</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">German</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Havana</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Highlander</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Himalayan</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Japanese</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Javanese</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Kurilian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Khao</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Korat</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Korean</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Korn</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Kurilian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Japan</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">LaPerm</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Lykoi</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Maine</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Manx</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Mekong</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Minskin</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Munchkin</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Nebelung</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Napoleon</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Norwegian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Ocicat</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Ojos</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Oregon</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Oriental</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Oriental</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Oriental</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">PerFold</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Persian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Persian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Peterbald</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Pixie</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Raas</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Ragamuffin</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Ragdoll</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Russian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Russian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Sam</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Savannah</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Scottish</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Selkirk</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Serengeti</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Serrade</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Siamese</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Siberian</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Singapura</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Snowshoe</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Sokoke</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Somali</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Sphynx</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Suphalak</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Thai</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Tonkinese</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Toyger</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Turkish</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Turkish</a></li>
  <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">United</a></li>
</ul>
      """

    'Lists Slab Stat Large':
      'prefix': 'slab-stat-large'
      'body': """
      <article class="pa3 pa5-ns" data-name="slab-stat-large">
  <h3 class="f6 ttu tracked">Today</h3>
  <div class="cf">
    <dl class="db dib-l w-auto-l lh-title mr6-l">
      <dd class="f6 fw4 ml0">Closed Issues</dd>
      <dd class="f2 f-subheadline-l fw6 ml0">1,024</dd>
    </dl>
    <dl class="db dib-l w-auto-l lh-title mr6-l">
      <dd class="f6 fw4 ml0">Open Issues</dd>
      <dd class="f2 f-subheadline-l fw6 ml0">993</dd>
    </dl>
    <dl class="db dib-l w-auto-l lh-title mr6-l">
      <dd class="f6 fw4 ml0">Next Release</dd>
      <dd class="f2 f-subheadline-l fw6 ml0">10-22</dd>
    </dl>
    <dl class="db dib-l w-auto-l lh-title mr6-l">
      <dd class="f6 fw4 ml0">Days Left</dd>
      <dd class="f2 f-subheadline-l fw6 ml0">4</dd>
    </dl>
    <dl class="db dib-l w-auto-l lh-title mr6-l">
      <dd class="f6 fw4 ml0">Favorite Cat</dd>
      <dd class="f2 f-subheadline-l fw6 ml0">All of Them</dd>
    </dl>
    <dl class="db dib-l w-auto-l lh-title">
      <dd class="f6 fw4 ml0">App Downloads</dd>
      <dd class="f2 f-subheadline-l fw6 ml0">1,200</dd>
    </dl>
  </div>
</article>
      """

    'Lists Slab Stat Small':
      'prefix': 'slab-stat-small'
      'body': """
      <article class="pa3 pa5-ns" data-name="slab-stat-small">
  <h3 class="f6 ttu tracked">Today</h3>
  <div class="cf">
    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
      <dd class="f6 fw4 ml0">Closed Issues</dd>
      <dd class="f3 fw6 ml0">1,024</dd>
    </dl>
    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
      <dd class="f6 fw4 ml0">Open Issues</dd>
      <dd class="f3 fw6 ml0">993</dd>
    </dl>
    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
      <dd class="f6 fw4 ml0">Next Release</dd>
      <dd class="f3 fw6 ml0">10-22</dd>
    </dl>
    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
      <dd class="f6 fw4 ml0">Days Left</dd>
      <dd class="f3 fw6 ml0">4</dd>
    </dl>
    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
      <dd class="f6 fw4 ml0">Favorite Cat</dd>
      <dd class="f3 fw6 ml0">All of Them</dd>
    </dl>
    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title">
      <dd class="f6 fw4 ml0">App Downloads</dd>
      <dd class="f3 fw6 ml0">1,200</dd>
    </dl>
  </div>
</article>
      """

    'Lists Slab Stat':
      'prefix': 'slab-stat'
      'body': """
      <article class="pa3 pa5-ns" data-name="slab-stat">
  <h1>Today</h1>
  <dl class="dib mr5">
    <dd class="f6 f5-ns b ml0">Closed Issues</dd>
    <dd class="f3 f2-ns b ml0">1,024</dd>
  </dl>
  <dl class="dib mr5">
    <dd class="f6 f5-ns b ml0">Open Issues</dd>
    <dd class="f3 f2-ns b ml0">993</dd>
  </dl>
  <dl class="dib mr5">
    <dd class="f6 f5-ns b ml0">Next Release</dd>
    <dd class="f3 f2-ns b ml0">10-22</dd>
  </dl>
  <dl class="dib mr5">
    <dd class="f6 f5-ns b ml0">Days Left</dd>
    <dd class="f3 f2-ns b ml0">4</dd>
  </dl>
  <dl class="dib mr5">
    <dd class="f6 f5-ns b ml0">Favorite Cat</dd>
    <dd class="f3 f2-ns b ml0">All of Them</dd>
  </dl>
  <dl class="dib">
    <dd class="f6 f5-ns b ml0">App Downloads</dd>
    <dd class="f3 f2-ns b ml0">1,200</dd>
  </dl>
</article>
      """

    'Lists Title Text':
      'prefix': 'title-text'
      'body': """
      <ul class="list pl0">
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">alignment</b>
    <span class="f5 db lh-copy measure">
      The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or centered. Flush left and flush right are sometimes referred to as left justified and right justified.</span>
  </li>
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">
      ascender
    </b>
    <span class="f5 db lh-copy measure">
      The part of lowercase letters (such as k, b, and d) that ascends above the
      x-height of the other lowercase letters in a face.
    </span>
  </li>
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">
      baseline
    </b>
    <span class="f5 db lh-copy measure">
      The imaginary line on which the majority of the characters in a typeface rest.
    </span>
  </li>
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">
      body text
    </b>
    <span class="f5 db lh-copy measure">
      The paragraphs in a document that make up the bulk of its content. The body text should be set in an appropriate and easy-to-read face, typically at 10- or 12-point size.
    </span>
  </li>
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">
      boldface
    </b>
    <span class="f5 db lh-copy measure">
      A typeface that has been enhanced by rendering it in darker, thicker strokes so that it will stand out on the page. Headlines that need emphasis should be boldface. Italics are preferable for emphasis in body text.
    </span>
  </li>
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">
      bullet
    </b>
    <span class="f5 db lh-copy measure">
    A dot or other special character placed at the left of items in a list to show that they are individual, but related, points.
    </span>
  </li>
  <li class="pa3 pa4-ns bb b--black-10">
    <b class="db f3 mb1">
cap height
    </b>
    <span class="f5 db lh-copy measure">
    The height from the baseline to the top of the uppercase letters in a font. This may or may not be the same as the height of ascenders. Cap height is used in some systems to measure the type size.
    </span>
  </li>
  <li class="pa3 pa4-ns">
    <b class="db f3 mb1">
      centered
    </b>
    <span class="f5 db lh-copy measure">
    Text placed at an equal distance from the left and right margins. Headlines are often centered. It is generally not good to mix centered text with flush left or flush right text.
    </span>
  </li>
</ul>
      """

    'Nav Large Title Link List':
      'prefix': 'large-title-link-list'
      'body': """
      <nav class="pa3 pa4-ns">
  <a class="link dim black b f1 f-headline-ns tc db mb3 mb4-ns" href="#" title="Home">Site Name</a>
  <div class="tc pb3">
    <a class="link dim gray f6 f5-ns dib mr3" href="#" title="Home">Home</a>
    <a class="link dim gray f6 f5-ns dib mr3" href="#" title="About">About</a>
    <a class="link dim gray f6 f5-ns dib mr3" href="#" title="Store">Store</a>
    <a class="link dim gray f6 f5-ns dib" href="#" title="Contact">Contact</a>
  </div>
</nav>
      """

    'Nav List Overflow':
      'prefix': 'list-overflow'
      'body': """
      <nav class="ph3 ph5-ns pv4">
  <div class="nowrap overflow-x-auto">
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 1">Link 1</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 2">Link 2</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 3">Link 3</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 4">Link 4</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 5">Link 5</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 6">Link 6</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 7">Link 7</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 8">Link 8</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 9">Link 9</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 10">Link 10</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 11">Link 11</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 12">Link 12</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 13">Link 13</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 14">Link 14</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 15">Link 15</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 16">Link 16</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 17">Link 17</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 18">Link 18</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 19">Link 19</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 20">Link 20</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 21">Link 21</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 22">Link 22</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 23">Link 23</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 24">Link 24</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 25">Link 25</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 26">Link 26</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 27">Link 27</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 28">Link 28</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 29">Link 29</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 30">Link 30</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 31">Link 31</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 32">Link 32</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 33">Link 33</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 34">Link 34</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 35">Link 35</a>
    <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 36">Link 36</a>
  </div>
</nav>
      """

    'Nav Logo Links Inline Collapse':
      'prefix': 'logo-links-inline-collapse'
      'body': """
      <nav class="db dt-l w-100 border-box pa3 ph5-l">
  <a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb2 mb0-l" href="#" title="Home">
    <img src="/img/logo.jpg" class="dib w2 h2 br-100" alt="Site Name">
  </a>
  <div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Home">Home</a>
    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="How it Works">How it Works</a>
    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Blog">Blog</a>
    <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Press">Press</a>
    <a class="link dim dark-gray f6 f5-l dib" href="#" title="Contact">Contact</a>
  </div>
</nav>
      """

    'Nav Logo Links Inline':
      'prefix': 'logo-links-inline'
      'body': """
      <nav class="dt w-100 border-box pa3 ph5-ns">
  <a class="dtc v-mid mid-gray link dim w-25" href="#" title="Home">
    <img src="/img/logo.jpg" class="dib w2 h2 br-100" alt="Site Name">
  </a>
  <div class="dtc v-mid w-75 tr">
    <a class="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="About">Services</a>
    <a class="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="Store">Blog</a>
    <a class="link dim dark-gray f6 f5-ns dib" href="#" title="Contact">Join Us</a>
  </div>
</nav>
      """

    'Nav Logo Titles Links Centered':
      'prefix': 'logo-titles-links-centered'
      'body': """
      <header class="bg-white black-80 tc pv4 avenir">
  <a href="" class="bg-black-80 ba b--black dib pa3 w2 h2 br-100">
    <svg class="white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
  </a>
  <h1 class="mt2 mb0 baskerville i fw1 f1">Title</h1>
  <h2 class="mt2 mb0 f6 fw4 ttu tracked">Your amazing subtitle</h2>
  <nav class="bt bb tc mw7 center mt4">
    <a class="f6 f5-l link bg-animate black-80 hover-bg-lightest-blue dib pa3 ph4-l" href="/">Home</a> 
    <a class="f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" href="/portfolio">Portfolio</a> 
    <a class="f6 f5-l link bg-animate black-80 hover-bg-light-blue dib pa3 ph4-l" href="/shop">Shop</a> 
    <a class="f6 f5-l link bg-animate black-80 hover-bg-light-pink dib pa3 ph4-l" href="/about">About</a> 
    <a class="f6 f5-l link bg-animate black-80 hover-bg-light-yellow dib pa3 ph4-l" href="/contact">Contact</a> 
  </nav>
</header>
      """

    'Nav Title Link List':
      'prefix': 'title-link-list'
      'body': """
      <nav class="pa3 pa4-ns">
  <a class="link dim black b f6 f5-ns dib mr3" href="#" title="Home">Site Name</a>
  <a class="link dim gray    f6 f5-ns dib mr3" href="#" title="Home">Home</a>
  <a class="link dim gray    f6 f5-ns dib mr3" href="#" title="About">About</a>
  <a class="link dim gray    f6 f5-ns dib mr3" href="#" title="Store">Store</a>
  <a class="link dim gray    f6 f5-ns dib" href="#" title="Contact">Contact</a>
</nav>
      """

    'Pages 4x4 Mixed Grid':
      'prefix': '4x4-mixed-grid'
      'body': """
      <article class="cf pa3 mw9 center">
  <header class="fl w-100 w-50-l pa3-m pa4-l mb3 mb5-l">
    <h2 class="lh-title f3 b mt0">
      Beginners and amateurs alike overestimate the importance of the
      so-called brain wave, the sudden brilliant idea.
    </h2>
  </header>
  <section class="fl w-100">
    <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
      <p class="f6 lh-copy measure">
        Perfect typography depends on perfect harmony between all of its elements. 
        Harmony is determined by relationships
        or proportions. Proportions are hidden everywhere. words themselves. 
      </p>
    </div>
    <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
      <p class="f6 lh-copy measure">
        True book design, therefore, is a matter of tact (tempo, rhythm,
        touch) alone. It flows from something rarely appreciated today:
        good taste. The book designer strives for perfection; yet every
        perfect thing lives somewhere in the neighborhood of dullness and
        is frequently mistaken for it by the insensitive. In a time that
        hungers for tangible novelties, dull perfection holds no
        advertising value at all. 
      </p>
    </div>
    <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
      <p class="f6 lh-copy measure">
        In a masterpiece of typography, the artist's signature has been
        eliminated. What some may praise as personal styles are in reality
        small and empty peculiarities, frequently damaging, that masquerade
        as innovations. 
      </p>
    </div>
    <div class="fl w-100 w-50-m w-25-l pa3-m pa4-l">
      <p class="f6 lh-copy measure">
        Only through constant practice and strictest self-criticism may we
        develop a sense for a perfect piece of work. Unfortunately, most
        seem content with a middling performance. Careful spacing of words
        and the correct spacing of capital letters appear to be unknown or
        unimportant to some typesetters, yet for him who investigates, the
        correct rules are not difficult to discover.
      </p>
    </div>
  </section>
  <section class="fl w-100">
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0008.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0012.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0045.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0051.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0018.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0019.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0038.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0011.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0004.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0002.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0020.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
    <div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
      <div class="aspect-ratio aspect-ratio--3x4">
        <span style="background-image:url(http://mrmrs.io/images/0013.jpg);" class="cover bg-center aspect-ratio--object"></span>
      </div>
    </div>
  </section>
   

</article>
      """

    'Pages Double':
      'prefix': 'double'
      'body': """
      <main class="w-100 cf helvetica dark-gray bg-white pa3 pa4-m pa5-l mw9 center">
    <div class="fl w-50 pr2 pr3-l mb3 mb4-l">
      <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/v/022.jpg) center;"></div>
    </div>
    <div class="fl w-50 w-25-l pl2 pr2-m ph2-l mb3 mb4-l">
      <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/v/024.jpg) center;"> </div>
    </div>
    <div class="fl w-50 w-50 w-25-l pr2 pr0-l pl3-l mb3 mb4-l">
        <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/050.jpg) left;"> </div>
      </div>
    <div class="fl w-50 w-50 w-25-l pl2 pl0-l pr2-m pr4-l mb3 mb4-l">
      <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/049.jpg) center;"> </div>
    </div>
    <div class="fl w-100 w-50-l pr2-l pl2-ns mb4 mb0-l mb4 outline">
      <div class="pa4">
        <h1 class="f4 f2-l fw7 mt0 pv3-l bb-l bb--black">#004</h1>
        <p class="lh-copy mt2 mt3-m mt5-l f6">
          <span class="db-ns f6 fw7 lh-solid mb3 mb0-m mb4-l">Mies, my great mentor said:</span> 
          <span class="fw9 f6 f1-l db lh-title mb3 mb4-l">“God is in the details.”</span>
          <span class="db-l measure-wide">
          That is the essence of syntax: the discipline
          that controls the proper use of grammar in the construction of phrases and the articulation of a language, Design. The syntax of design is provided by many components in the nature of the project.
        </span>
        </p>
      </div>
    </div>
    <div class="cf">
      <div class="fl w-100 w-25-l pl3-l mb3 mb4-l">
          <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/051.jpg) center;"> </div>
      </div>
      <div class="fl w-100 w-25-l pr3-l">
        <p class="lh-copy measure f6 pt3 pt0-l mt0 mb3 mb4-l center">
          <span class="fw6">For us Graphic Design is “organization of information.”</span> There are other
          types of graphic design more concerned with illustration or of a
          narrative nature.  Nothing could be more useful to reach our intention
          than the Grid. The grid represents the basic structure of our graphic
          design, it helps to organize the content, it provides consistency, it
          gives an orderly look and it projects a level of intellectual elegance
          that we like to express.  There are in nite kinds of grids, but just
          one - the most appropriate - for any problem. Therefore, it becomes
          important to know which kind of grid is the most appropriate. The basic
          understanding is that the smaller the module of the grid the least
          helpful it could be. We could say that an empty page is a page with an
          in nitesimal small grid. Therefore, it is equivalent to not being
          there. Conversely a page with a coarse grid is a very restricting grid
          offering too few alternatives. The secret is to  nd the proper kind of
          grid for the job at hand. Sometimes, in designing a grid we want to
          have the outside margins small enough to provide a certain tension
          between the edges of the page and the content. After that we divide the
          page in a certain number of columns according to the content, three,
          two, four,  ve, six, etc. Columns provide only one kind of consistency,
          but we also need to have an horizontal frame of reference to assure
          certain levels of continuity throughout the publication. Therefore, we
          will divide the page from top to bottom in a certain number of Modules,
          four, six, eight, or more, according to size and need. Once we have
          structured the page, we will begin to structure the information and
          place it in the grid in such a way that the clarity of the message will
          be enhanced by the placement of the text on the grid. There are in nite
          ways of doing this and that is why the grid is a useful tool, rather
          than a constricting device. 
        </p>
      </div>
    
      <div class="fl w-100 w-75-l pv0 mv0">
        <div class="fl w-100 mb2 mb4-l">
          <div class="cover pv5 pv6-l" style="background:black url(http://mrmrs.io/photos/u/001.jpg) center;"> </div>
        </div>
        <div class="fl w-25 mb2 mb4-l">
          <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/u/002.jpg) center;"> </div>
        </div>
        <div class="fl w-75 pl2 pl4-l mb2 mb4-l">
          <div class="cover pv5 pv6-m pv7-l" style="background:black url(http://mrmrs.io/photos/u/003.jpg) center;"> </div>
        </div>
        <div class="fl w-100 mb2 mb4-l">
            <div class="cover pv5 pv6-ns" style="background:black url(http://mrmrs.io/photos/u/004.jpg) center;"> </div>
        </div>
      </div>
    </div>
</main>
      """

    'Pages Swiss Cover Five Columns':
      'prefix': 'swiss-cover-five-columns'
      'body': """
      <main class="cf pa3 pa4-m pa5-l mw9 center">
  <div class="fr w-100 w-80-l">
    <p class="f6">
      Beitrage zut
    </p>
    <h1 class="f2 f1-l lh-title mt0 mb4 mb5-ns">
      Kunst<br class="dn db-ns"> des 19. und 20.Jahrhunderts
    </h1>
  </div>
  <div class="f6 lh-copy fl w-100 mb4">
    <div class="fl-ns w-100 w-20-l pr3-m pr5-l">
      <p>
        Jahrbuch <small class="fw6">1968/69</small>
      </p> 
    </div>
    <div class="fl-ns w-50-m w-20-l pr3-m pr5-l">
      <p>
        Institut suisse pour l'étude de l'art
      </p> 
    </div>
    <div class="fl-ns w-50-m w-20-l pr3-m pr5-l">
      <p>
        Schweizerisches<br class="dn db-l"> Institut für Kunstwissenschaft
      </p> 
    </div>
    <div class="fl-ns w-50-m w-20-l pr3-m pr5-l">
      <p>
        Istituto svizzero di studi d'arte
      </p>
    </div>
    <div class="fl-ns w-50-m w-20-l pr3-m pr5-l">
      <p>
        Swiss Institute for Art Research
      </p>
    </div>
  </div>
  <img src="http://mrmrs.io/photos/u/007.jpg" class="db" alt="iceland"/>
</main>
      """