Missouri State University Pattern Library

Related content: Touts

There are three related content sections (related content with links, text or touts) available within Modern Campus CMS as components. This section is typically placed at the bottom of the page. It is used primarily for grouping content that is related to the main content without competing for the optimal placement on the page.

Build related content in Modern Campus CMS

<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="" loading="lazy">
                </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="" loading="lazy">
                </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="" loading="lazy">
                </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"
          }
        }
      }
    }
  ]
}