Missouri State University Pattern Library

Tout

There are no notes for this item.

<div class="ContentBlock tout">
    <div class="image-container">
        <img class="image" src="http://picsum.photos/1920/1080?random" alt="">
    </div>
    <div class="container">
        <div class="eyebrow">Lorem ipsum dolor</div>
        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
        <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
        </p>
    </div>
</div>
 
<div class="ContentBlock tout{{#if layout.horizontal}} Horz{{/if}}">
  {{#if image}}
    <div class="image-container">
      <img class="image" src="{{path image.src}}" alt="{{image.alt}}">
    </div>
  {{/if}}
  <div class="container">
    {{#if eyebrow}}
      <div class="eyebrow">{{eyebrow}}</div>
    {{/if}}
    <h3 class="headline"><a href="{{link.url}}">{{headline}}</a></h3>
    {{#if description}}
      <p class="description">
        {{description}}
      </p>
    {{/if}}
  </div>
</div>
 
{
  "eyebrow": "Lorem ipsum dolor",
  "image": {
    "src": "http://picsum.photos/1920/1080?random",
    "alt": null
  },
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.",
  "link": {
    "url": "#"
  }
}