Related content
Related content is used to provide additional information for the user.
Related links
Can include single or multiple rows of related links.
Single row (default)
<aside class="ons-related-content" aria-label="Related links to help with the census">
<div class="ons-related-content__body">
<div class="ons-related-content__section">
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="related-content">Related content</h2>
<nav class="ons-related-content__navigation" aria-labelledby="related-content">
<ul class="ons-list ons-list--bare">
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Find a census support centre</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Languages</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Contact us</a>
</li>
</ul>
</nav>
</div>
</div>
</aside>
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{{
onsRelatedContent({
"ariaLabel": 'Related links to help with the census',
"rows": [
{
"id": 'related-content',
"title": 'Related content',
"itemsList": [
{
"text": 'Find a census support centre',
"url": '#0'
},
{
"text": 'Languages',
"url": '#0'
},
{
"text": 'Contact us',
"url": '#0'
}
]
}
]
})
}}
{% macro onsRelatedContent(params) %}
{% from "components/lists/_macro.njk" import onsList %}
{% if params is defined and params and params.classes is defined and params.classes %}
{% set classes = ' ' + params.classes %}
{% endif %}
<aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
<div class="ons-related-content__body">
{% if params.rows is defined and params.rows %}
{% for row in params.rows %}
<div class="ons-related-content__section">
{% if row.title %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2>
{% endif %}
<nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
{{
onsList({
"variants": 'bare',
"iconPosition": row.iconPosition,
"iconSize": row.iconSize,
"itemsList": row.itemsList
})
}}
</nav>
</div>
{% endfor %}
{% else %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</h2>
<div class="ons-related-content__body">
{{ (params.body if params else "") | safe }}{{ caller() if caller }}
</div>
{% endif %}
</div>
</aside>
{% endmacro %}
.ons-related-content {
@extend .ons-u-mt-m;
border-top: 5px solid $color-branded;
padding-top: 1rem;
&__section {
& + & {
border-top: 1px solid $color-grey-75;
margin: 2rem 0 0;
padding: 2em 0 0;
}
> :last-child {
margin-bottom: 0;
}
}
}
Multiple rows (census)
<aside class="ons-related-content" aria-label="Related links to help with the census">
<div class="ons-related-content__body">
<div class="ons-related-content__section">
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="related-help-with-the-census">Help with the census</h2>
<nav class="ons-related-content__navigation" aria-labelledby="related-help-with-the-census">
<ul class="ons-list ons-list--bare">
<li class="ons-list__item">
<a href="#0" class="ons-list__link">I’m moving house</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">What if I’m away or abroad on Census Day?</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Get an access code or paper census</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Find a census support centre</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Languages</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Accessibility</a>
</li>
</ul>
</nav>
</div>
<div class="ons-related-content__section">
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="related-content">Related content</h2>
<nav class="ons-related-content__navigation" aria-labelledby="related-content">
<ul class="ons-list ons-list--bare">
<li class="ons-list__item">
<a href="#0" class="ons-list__link">How we will contact or visit you</a>
</li>
<li class="ons-list__item">
<a href="#0" class="ons-list__link">Media enquiries</a>
</li>
</ul>
</nav>
</div>
</div>
</aside>
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{{
onsRelatedContent({
"ariaLabel": 'Related links to help with the census',
"rows": [
{
"id": 'related-help-with-the-census',
"title": 'Help with the census',
"itemsList": [
{
"text": 'I’m moving house',
"url": '#0'
},
{
"text": 'What if I’m away or abroad on Census Day?',
"url": '#0'
},
{
"text": 'Get an access code or paper census',
"url": '#0'
},
{
"text": 'Find a census support centre',
"url": '#0'
},
{
"text": 'Languages',
"url": '#0'
},
{
"text": 'Accessibility',
"url": '#0'
}
]
},
{
"id": 'related-content',
"title": 'Related content',
"itemsList": [
{
"text": 'How we will contact or visit you',
"url": '#0'
},
{
"text": 'Media enquiries',
"url": '#0'
}
]
}
]
})
}}
{% macro onsRelatedContent(params) %}
{% from "components/lists/_macro.njk" import onsList %}
{% if params is defined and params and params.classes is defined and params.classes %}
{% set classes = ' ' + params.classes %}
{% endif %}
<aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
<div class="ons-related-content__body">
{% if params.rows is defined and params.rows %}
{% for row in params.rows %}
<div class="ons-related-content__section">
{% if row.title %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2>
{% endif %}
<nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
{{
onsList({
"variants": 'bare',
"iconPosition": row.iconPosition,
"iconSize": row.iconSize,
"itemsList": row.itemsList
})
}}
</nav>
</div>
{% endfor %}
{% else %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</h2>
<div class="ons-related-content__body">
{{ (params.body if params else "") | safe }}{{ caller() if caller }}
</div>
{% endif %}
</div>
</aside>
{% endmacro %}
.ons-related-content {
@extend .ons-u-mt-m;
border-top: 5px solid $color-branded;
padding-top: 1rem;
&__section {
& + & {
border-top: 1px solid $color-grey-75;
margin: 2rem 0 0;
padding: 2em 0 0;
}
> :last-child {
margin-bottom: 0;
}
}
}
Related content (census)
Contact details to support languages.
Language helpline (default)
<aside class="ons-related-content" aria-label="Contact details to support languages">
<div class="ons-related-content__body">
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">Free language helpline</h2>
<div class="ons-related-content__body">
<p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
<ul class="ons-list ons-u-mb-no ons-list--bare">
<li class="ons-list__item">
Monday to Friday, 8am to 8pm
</li>
<li class="ons-list__item">
Saturday, 8am to 1pm
</li>
<li class="ons-list__item">
Census weekend 20 – 21 March, 8am to 8pm
</li>
</ul>
</div>
</div>
</aside>
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{% from "components/lists/_macro.njk" import onsList %}
{% call onsRelatedContent({
"title": 'Free language helpline',
"ariaLabel": 'Contact details to support languages'
})
%}
<p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
{{
onsList({
"classes": 'ons-u-mb-no',
"variants": 'bare',
"itemsList": [
{
"text": 'Monday to Friday, 8am to 8pm'
},
{
"text": 'Saturday, 8am to 1pm'
},
{
"text": 'Census weekend 20 – 21 March, 8am to 8pm'
}
]
})
}}
{% endcall %}
{% macro onsRelatedContent(params) %}
{% from "components/lists/_macro.njk" import onsList %}
{% if params is defined and params and params.classes is defined and params.classes %}
{% set classes = ' ' + params.classes %}
{% endif %}
<aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
<div class="ons-related-content__body">
{% if params.rows is defined and params.rows %}
{% for row in params.rows %}
<div class="ons-related-content__section">
{% if row.title %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2>
{% endif %}
<nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
{{
onsList({
"variants": 'bare',
"iconPosition": row.iconPosition,
"iconSize": row.iconSize,
"itemsList": row.itemsList
})
}}
</nav>
</div>
{% endfor %}
{% else %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</h2>
<div class="ons-related-content__body">
{{ (params.body if params else "") | safe }}{{ caller() if caller }}
</div>
{% endif %}
</div>
</aside>
{% endmacro %}
.ons-related-content {
@extend .ons-u-mt-m;
border-top: 5px solid $color-branded;
padding-top: 1rem;
&__section {
& + & {
border-top: 1px solid $color-grey-75;
margin: 2rem 0 0;
padding: 2em 0 0;
}
> :last-child {
margin-bottom: 0;
}
}
}
Language helpline (census)
<aside class="ons-related-content" aria-label="Contact details to support languages">
<div class="ons-related-content__body">
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">Free language helpline</h2>
<div class="ons-related-content__body">
<p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
<ul class="ons-list ons-u-mb-no ons-list--bare">
<li class="ons-list__item">
Monday to Friday, 8am to 8pm
</li>
<li class="ons-list__item">
Saturday, 8am to 1pm
</li>
<li class="ons-list__item">
Census weekend 20 – 21 March, 8am to 8pm
</li>
</ul>
</div>
</div>
</aside>
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{% from "components/lists/_macro.njk" import onsList %}
{% call onsRelatedContent({
"title": 'Free language helpline',
"ariaLabel": 'Contact details to support languages'
})
%}
<p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
{{
onsList({
"classes": 'ons-u-mb-no',
"variants": 'bare',
"itemsList": [
{
"text": 'Monday to Friday, 8am to 8pm'
},
{
"text": 'Saturday, 8am to 1pm'
},
{
"text": 'Census weekend 20 – 21 March, 8am to 8pm'
}
]
})
}}
{% endcall %}
{% macro onsRelatedContent(params) %}
{% from "components/lists/_macro.njk" import onsList %}
{% if params is defined and params and params.classes is defined and params.classes %}
{% set classes = ' ' + params.classes %}
{% endif %}
<aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
<div class="ons-related-content__body">
{% if params.rows is defined and params.rows %}
{% for row in params.rows %}
<div class="ons-related-content__section">
{% if row.title %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2>
{% endif %}
<nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
{{
onsList({
"variants": 'bare',
"iconPosition": row.iconPosition,
"iconSize": row.iconSize,
"itemsList": row.itemsList
})
}}
</nav>
</div>
{% endfor %}
{% else %}
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</h2>
<div class="ons-related-content__body">
{{ (params.body if params else "") | safe }}{{ caller() if caller }}
</div>
{% endif %}
</div>
</aside>
{% endmacro %}
.ons-related-content {
@extend .ons-u-mt-m;
border-top: 5px solid $color-branded;
padding-top: 1rem;
&__section {
& + & {
border-top: 1px solid $color-grey-75;
margin: 2rem 0 0;
padding: 2em 0 0;
}
> :last-child {
margin-bottom: 0;
}
}
}
Help improve this component
Let us know how we could improve this component or share your user research findings. Discuss ‘Related content’ component on GitHub