Missouri State University Pattern Library

Related content: Links

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 important-link">
                <!-- Log the context received by the partial to see what it is receiving -->
                <a href="#">
                    <div class="eyebrow">Lorem ipsum dolor</div>
                    <div class="headline">Lorem ipsum dolor sit amet consectetur</div>
                </a>
            </div>

        </div>
        <div class="item">
            <div class="ContentBlock important-link">
                <!-- Log the context received by the partial to see what it is receiving -->
                <a href="#">
                    <div class="eyebrow">Lorem ipsum dolor</div>
                    <div class="headline">Lorem ipsum dolor sit amet consectetur</div>
                </a>
            </div>

        </div>
        <div class="item">
            <div class="ContentBlock important-link">
                <!-- Log the context received by the partial to see what it is receiving -->
                <a href="#">
                    <div class="eyebrow">Lorem ipsum dolor</div>
                    <div class="headline">Lorem ipsum dolor sit amet consectetur</div>
                </a>
            </div>

        </div>
        <div class="item">
            <div class="ContentBlock important-link">
                <!-- Log the context received by the partial to see what it is receiving -->
                <a href="#">
                    <div class="eyebrow">Lorem ipsum dolor</div>
                    <div class="headline">Lorem ipsum dolor sit amet consectetur</div>
                </a>
            </div>

        </div>
    </div>
</div>
 
{{#>@related-content}}
  {{#*inline 'content'}}
    {{render '@important-link' link merge=true}}
  {{/inline}}
{{/@related-content}}
 
{
  "headline": "Lorem ipsum",
  "items": [
    {
      "content": {
        "link": {
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "url": "#"
        }
      }
    },
    {
      "content": {
        "link": {
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "url": "#"
        }
      }
    },
    {
      "content": {
        "link": {
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "url": "#"
        }
      }
    },
    {
      "content": {
        "link": {
          "eyebrow": "Lorem ipsum dolor",
          "headline": "Lorem ipsum dolor sit amet consectetur",
          "url": "#"
        }
      }
    }
  ]
}