document:
- title: Primary headings
  markup: |
    <h1>Page Heading</h1>
- title: Primary with secondary headings
  markup: |
    <h1>Page heading</h1>
    <h2>Sub-section heading</h2>
- title: Secondary with tertiary headings
  markup: |
    <h3>This is a section heading</h2>
    <p class="campaign">This is a sub-section heading</p>
- title: Slugs
  markup: |
    <h3 class="slug">You may also like</h3>
- title: Copy Text
  markup: |
    <p class="informational">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <p class="campaign">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
- title: Copyright
  markup: <p class="copyright">© Copyright 2009-2016 THE OUTNET.COM, part of YOOX NET-A-PORTER GROUP</p>
- title: Hyperlinks
  markup: |
    <a class="underline" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit.
    <p class="informational">
      <a class="underline informational" href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit.
    </p>
- title: Credits
  markup: |
    <p class="credit">
      Credit Type <span>Credit source</span>
      Credit Type <span>Credit source</span>
    </p>
- title: Breadcrumbs
  disable: true
  markup: |
    <div class="breadcrumbs">
    	<a href="/en-GB/" title="Home">Home</a>
    	<a href="/en-GB/Shop/Clothing" title="Clothing">Clothing</a>
    	<span class="current">Tops</span>
    </div>
- title: Notifications
  markup: |
    <span class="notification">
      You have 3 notifications
    </span>
    <p class="notification badge">
      Just 1 left
    </p>
- title: Lists
  markup: |
    <ul>
      <li>Alexander Wang</li>
      <li>Missoni</li>
      <li>MICHAEL Michael Kors</li>
    </ul>
- title: Quotes
  detail: Note that hyphens must be used before the quote source
  markup: |
    <p class="quote">
      "We are all apprentices in a craft where no one ever becomes a master."
      <span class="credit">&mdash; Ernest Hemmingway</span>
    </p>
- title: Products
  markup: |
    <div class="product-item">
      <span class="designer-name">Monreal London</span>
      <span class="title">Mesh-trimmed stretch-jersey top</span>
      <div class="pricing">
        <span class="current">£65</span>
        <div class="discount-pricing">
          <span class="original">Was £130</span>
          <span class="discount">50% off</span>
        </div>
      </div>
    </div>
- title: Promotional Slugs
  markup: |
    <p class="slug">
      I am a promotional slug
    </p>
- title: Discount
  markup: |
    <p class="discount">
      Up to <strong>70% off</strong>
    </p>
- title: Badges
  markup: |
    <div>
      <p class="badge">
        Exclusive to the Outnet
      </p>
    </div>
    <div>
      <p class="badge sold-out">
        Sold Out
      </p>
    </div>