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.
- Handle: @related-content
- Variants (3): Text , Links , Touts
- Preview:
- Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/related-content/related-content.hbs
- References (1): @rich-text
- Referenced by (2): @related-content--links, @related-content--touts
<div class="related-content">
<h2 class="headline">Lorem ipsum dolor</h2>
<div class="container">
<div class="item">
<div class="ContentBlock RichText">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit. Cupiditate nostrum itaque debitis <a href="#">odit minima ducimus dicta facere</a>, ex sequi perspiciatis.</p>
</div>
</div>
<div class="item">
<div class="ContentBlock RichText">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit. Cupiditate nostrum itaque debitis <a href="#">odit minima ducimus dicta facere</a>, ex sequi perspiciatis.</p>
</div>
</div>
<div class="item">
<div class="ContentBlock RichText">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit. Cupiditate nostrum itaque debitis <a href="#">odit minima ducimus dicta facere</a>, ex sequi perspiciatis.</p>
</div>
</div>
</div>
</div>
<div class="related-content">
<h2 class="headline">{{headline}}</h2>
<div class="container">
{{#each items}}
<div class="item">
{{#> content content}}{{render '@rich-text' richText merge=true}}{{/content}}
</div>
{{/each}}
</div>
</div>
{
"headline": "Lorem ipsum dolor",
"items": [
{
"content": {
"richText": {
"pageId": 10,
"freeformContent": "<h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit. Cupiditate nostrum itaque debitis <a href=\"#\">odit minima ducimus dicta facere</a>, ex sequi perspiciatis.</p>",
"pageClass": null
}
}
},
{
"content": {
"richText": {
"pageId": 10,
"freeformContent": "<h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit. Cupiditate nostrum itaque debitis <a href=\"#\">odit minima ducimus dicta facere</a>, ex sequi perspiciatis.</p>",
"pageClass": null
}
}
},
{
"content": {
"richText": {
"pageId": 10,
"freeformContent": "<h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit. Cupiditate nostrum itaque debitis <a href=\"#\">odit minima ducimus dicta facere</a>, ex sequi perspiciatis.</p>",
"pageClass": null
}
}
}
]
}