Missouri State University Pattern Library

Tile

There are no notes for this item.

<a class="tile" href="#">
    <div class="image-container">
        <img class="image" src="http://picsum.photos/1920/1080?random" alt="Lorem ipsum dolor">
    </div>
    <div class="container">
        <div class="eyebrow">Lorem ipsum dolor</div>
        <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
        <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, laudantium at! Pariatur.</div>
    </div>
</a>
 
<a class="tile" href="{{link.url}}">
  <div class="image-container">
    <img class="image" src="{{image.src}}" alt="{{image.alt}}">
  </div>
  <div class="container">
    {{#if eyebrow}}
      <div class="eyebrow">{{eyebrow}}</div>
    {{/if}}
    <h2 class="headline">{{headline}}</h2>
    {{#if description}}
      <div class="description">{{description}}</div>
    {{/if}}
  </div>
</a>
 
{
  "eyebrow": "Lorem ipsum dolor",
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, laudantium at! Pariatur.",
  "image": {
    "src": "http://picsum.photos/1920/1080?random",
    "alt": "Lorem ipsum dolor"
  },
  "link": {
    "text": "Lorem ipsum dolor",
    "url": "#"
  }
}