Missouri State University Pattern Library

Related content: Touts

There are no notes for this item.

<div class="related-content">
    <h2 class="headline">Lorem ipsum</h2>
    <div class="container">
        <div class="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 adipisicing elit. Qui, enim! Dolor, laboriosam.
                    </p>
                </div>
            </div>

        </div>
        <div class="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 adipisicing elit. Qui, enim! Dolor, laboriosam.
                    </p>
                </div>
            </div>

        </div>
        <div class="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 adipisicing elit. Qui, enim! Dolor, laboriosam.
                    </p>
                </div>
            </div>

        </div>
    </div>
</div>
 
{{#>@related-content}}
  {{#*inline 'content'}}
    {{render '@tout' tout merge=true}}
  {{/inline}}
{{/@related-content}}
 
{
  "headline": "Lorem ipsum",
  "items": [
    {
      "content": {
        "tout": {
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, enim! Dolor, laboriosam.",
          "image": {
            "src": "http://picsum.photos/1920/1080?random"
          }
        }
      }
    },
    {
      "content": {
        "tout": {
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, enim! Dolor, laboriosam.",
          "image": {
            "src": "http://picsum.photos/1920/1080?random"
          }
        }
      }
    },
    {
      "content": {
        "tout": {
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, enim! Dolor, laboriosam.",
          "image": {
            "src": "http://picsum.photos/1920/1080?random"
          }
        }
      }
    }
  ]
}