Missouri State University Pattern Library

Four-block

There are no notes for this item.

<div class="four-block">
    <div class="tiles">
        <a class="tile" href="#">
            <div class="image-container">
                <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;1" 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. Tempora ut cumque amet.</div>
            </div>
        </a>
        <a class="tile" href="#">
            <div class="image-container">
                <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;2" 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. Tempora ut cumque amet.</div>
            </div>
        </a>
        <a class="tile" href="#">
            <div class="image-container">
                <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;3" 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. Tempora ut cumque amet.</div>
            </div>
        </a>
        <a class="tile" href="#">
            <div class="image-container">
                <img class="image" src="http://picsum.photos/1920/1080?random&#x3D;4" 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. Tempora ut cumque amet.</div>
            </div>
        </a>
    </div>
</div>
 
<div class="four-block">
  <div class="tiles">
    {{#each tiles}}
      {{render '@tile' tile}}
    {{/each}}
  </div>
</div>
 
{
  "tiles": [
    {
      "tile": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random=1",
          "alt": "Lorem ipsum dolor"
        },
        "eyebrow": "Lorem ipsum dolor",
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ut cumque amet.",
        "link": {
          "url": "#"
        }
      }
    },
    {
      "tile": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random=2",
          "alt": "Lorem ipsum dolor"
        },
        "eyebrow": "Lorem ipsum dolor",
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ut cumque amet.",
        "link": {
          "url": "#"
        }
      }
    },
    {
      "tile": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random=3",
          "alt": "Lorem ipsum dolor"
        },
        "eyebrow": "Lorem ipsum dolor",
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ut cumque amet.",
        "link": {
          "url": "#"
        }
      }
    },
    {
      "tile": {
        "image": {
          "src": "http://picsum.photos/1920/1080?random=4",
          "alt": "Lorem ipsum dolor"
        },
        "eyebrow": "Lorem ipsum dolor",
        "headline": "Lorem ipsum dolor sit amet consectetur",
        "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ut cumque amet.",
        "link": {
          "url": "#"
        }
      }
    }
  ]
}