document:
- title: Ribbon
  detail: |
    Used for site-wide messages such as promotions or important messages.
    Only one ribbon to be used per site.
  markup: |
    <div class="ribbon">
      Free Shipping for Chinese New Year when you spend £100!
      Enter code <span>CNY2015</span> at checkout
    </div>
- title: Promotional Messages
  detail: |
    Used for messages such as
    <em>Free Shipping</em> and
    <em>Additional Discounts</em>
  markup: |
    <div class="service-message service-message-promo">
      <div class="service-message-head service-message-asterisk">Free Shipping</div>
      <div class="service-message-sell">Until the <b>24th of December</b></div>
      <div class="service-message-asterisk-copy">*Some terms and conditions may apply</div>
    </div>
- title: Notification Messages
  detail: |
    Used for messages such as
    <em>Further Reductions</em>,
    <em>Last Chance to Buy</em> and
    <em>Back in Stock</em>
  markup: |
    <div class="service-message service-message-notify">
      <div class="service-message-head">Further Reductions</div>
      <div class="service-message-sell">Sell description</div>
      <a class="btn btn-primary btn-white width-m" href="#" role="button">Call to action</a>
    </div>
- title: Service Messages
  detail: |
    Used for messages such as
    <em>Customer Care</em>,
    <em>Payment Details</em> and
    <em>Sizing Preferences</em>
  markup: |
    <div class="service-message service-message-service">
      <div class="service-message-head">Setup your Sizing Preferences</div>
      <div class="service-message-sell">Give us a call on <b>xxx xxx xxxx</b></div>
    </div>