Related content
Overview
Use the related content component to provide additional information to the user.
Nunjucks
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{{ onsRelatedContent({
"ariaLabel": 'Related content',
"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'
}
]
}
]
}) }}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<Row> | true | Settings for an array of row objects |
| ariaLabel | string | false | Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to ”Related content”. |
| classes | string | false | Custom classes to add to the related content aside element |
| Name | Type | Required | Description |
|---|---|---|---|
| title | string | true | The text for the h2 heading for the row |
| id | string | true | The HTML id of the row heading. Connects heading to the HTML nav element using the same value for an ARIA label attribute. |
| itemsList | Array<ListItem> (ref) | true | A list of links for the row |
| iconType | string | false | Adds an icon to all the list items when set to the name of one of the available icons. Requires iconPosition to be set. |
| iconPosition | string | false | Sets the position of the icon to “before” or “after” each list item in the row |
| iconSize | string | false | Icon size can be set to match the size of the list item text as detailed in the typography type scale. |
HTML
<aside class="ons-related-content" aria-label="Related content">
<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>
<div class="ons-related-content__content">
<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>
<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>
<div class="ons-related-content__content">
<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>How to use this component
Nesting components
You can nest other components inside of the related content component.
To do this, you will need to use an additional secondary 'inner' component called onsRelatedContentSection().
This can be used multiple times to allow complete flexibility, while maintaining the correct spacing and styling.
To use this approach you need to implement onsRelatedContent() using the Nunjucks call block (opens in a new tab)
You should then nest onsRelatedContentSection() inside using call().
See the “Nunjucks” tab output for the example to see how it works.
Nunjucks
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
{% from "components/list/_macro.njk" import onsList %}
{% call onsRelatedContent({
"ariaLabel": 'Related content'
}) %}
{% call onsRelatedContentSection() %}
<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'
}
]
})
}}
{% endcall %}
{% call onsRelatedContentSection() %}
<p class="ons-u-mb-xs">Live chat</p>
{{
onsList({
"classes": 'ons-u-mb-no',
"variants": 'bare',
"itemsList": [
{
"text": 'Monday to Friday, 10am to 5pm'
},
{
"text": 'Saturday, 9am to 3pm'
}
]
})
}}
{% endcall %}
{% endcall %}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<Row> | true | Settings for an array of row objects |
| ariaLabel | string | false | Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to ”Related content”. |
| classes | string | false | Custom classes to add to the related content aside element |
| Name | Type | Required | Description |
|---|---|---|---|
| title | string | true | The text for the h2 heading for the row |
| id | string | true | The HTML id of the row heading. Connects heading to the HTML nav element using the same value for an ARIA label attribute. |
| itemsList | Array<ListItem> (ref) | true | A list of links for the row |
| iconType | string | false | Adds an icon to all the list items when set to the name of one of the available icons. Requires iconPosition to be set. |
| iconPosition | string | false | Sets the position of the icon to “before” or “after” each list item in the row |
| iconSize | string | false | Icon size can be set to match the size of the list item text as detailed in the typography type scale. |
HTML
<aside class="ons-related-content" aria-label="Related content">
<div class="ons-related-content__section">
<div class="ons-related-content__content">
<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>
</ul>
</div>
</div>
<div class="ons-related-content__section">
<div class="ons-related-content__content">
<p class="ons-u-mb-xs">Live chat</p>
<ul class="ons-list ons-u-mb-no ons-list--bare">
<li class="ons-list__item"> Monday to Friday, 10am to 5pm </li>
<li class="ons-list__item"> Saturday, 9am to 3pm </li>
</ul>
</div>
</div>
</aside>Variants
Related social media links
Use the social media links variant to show the user related social media pages.
Nunjucks
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{{ onsRelatedContent({
"ariaLabel": 'Social media links',
"rows": [
{
"id": 'follow-us',
"title": 'Follow us',
"variants": 'social',
"iconPosition": 'before',
"iconSize": 'xxl',
"itemsList": [
{
"url": '#0',
"text": 'Twitter',
"iconType": 'twitter',
"rel": 'noreferrer external'
},
{
"url": '#0',
"text": 'Facebook',
"iconType": 'facebook',
"rel": 'noreferrer external'
},
{
"url": '#0',
"text": 'Instagram',
"iconType": 'instagram',
"rel": 'noreferrer external'
},
{
"url": '#0',
"text": 'LinkedIn',
"iconType": 'linkedin',
"rel": 'noreferrer external'
}
]
}
]
}) }}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<Row> | true | Settings for an array of row objects |
| ariaLabel | string | false | Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to ”Related content”. |
| classes | string | false | Custom classes to add to the related content aside element |
| Name | Type | Required | Description |
|---|---|---|---|
| title | string | true | The text for the h2 heading for the row |
| id | string | true | The HTML id of the row heading. Connects heading to the HTML nav element using the same value for an ARIA label attribute. |
| itemsList | Array<ListItem> (ref) | true | A list of links for the row |
| iconType | string | false | Adds an icon to all the list items when set to the name of one of the available icons. Requires iconPosition to be set. |
| iconPosition | string | false | Sets the position of the icon to “before” or “after” each list item in the row |
| iconSize | string | false | Icon size can be set to match the size of the list item text as detailed in the typography type scale. |
HTML
<aside class="ons-related-content" aria-label="Social media links">
<div class="ons-related-content__section">
<h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="follow-us">Follow us</h2>
<div class="ons-related-content__content">
<nav class="ons-related-content__navigation" aria-labelledby="follow-us">
<ul class="ons-list ons-list--bare ons-list--bare ons-list--icons">
<li class="ons-list__item">
<span class="ons-list__prefix" aria-hidden="true">
<svg class="ons-icon ons-icon--xxl" id="icon-twitter" viewBox="0 0 90.01 90.01"
xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"
title="ons-icon-twitter">
<polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01" />
<path
d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z" />
</svg></span><a href="#0" class="ons-list__link">Twitter</a>
</li>
<li class="ons-list__item">
<span class="ons-list__prefix" aria-hidden="true">
<svg class="ons-icon ons-icon--xxl" id="icon-facebook" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"
title="ons-icon-facebook">
<path
d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z" />
</svg></span><a href="#0" class="ons-list__link">Facebook</a>
</li>
<li class="ons-list__item">
<span class="ons-list__prefix" aria-hidden="true">
<svg class="ons-icon ons-icon--xxl" id="icon-instagram" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"
title="ons-icon-title">
<path
d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z" />
</svg></span><a href="#0" class="ons-list__link">Instagram</a>
</li>
<li class="ons-list__item">
<span class="ons-list__prefix" aria-hidden="true">
<svg class="ons-icon ons-icon--xxl" id="icon-linkedin" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" role="img"
title="ons-icon-linkedin">
<path
d="M16,-3.41060513e-13 C20.2434638,-3.41060513e-13 24.3131264,1.68570945 27.3137085,4.6862915 C30.3142906,7.68687356 32,11.7565362 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,-3.41060513e-13 16,-3.41060513e-13 Z M11.3505859,12.4641113 L7.45385744,12.4641113 L7.45385744,24.1875 L11.3505859,24.1875 L11.3505859,12.4641113 Z M20.9152832,12.1889649 C18.8479004,12.1889649 17.9213867,13.3251953 17.4035644,14.1240234 L17.4035644,14.1240234 L17.4035644,12.4641113 L13.5070801,12.4641113 C13.5212538,12.7696262 13.5275532,13.809993 13.5292593,15.1533871 L13.5293118,16.8832762 C13.5292156,16.9843911 13.5291048,17.0860852 13.5289803,17.1882303 L13.5280782,17.8054916 L13.5280782,17.8054916 L13.5268961,18.427439 C13.5216699,20.9164121 13.5108442,23.3704557 13.5078578,24.0208157 L13.5070801,24.1875 L17.4035644,24.1875 L17.4035644,17.640625 C17.4035644,17.2902832 17.4287109,16.9401856 17.5317382,16.6896972 C17.8134766,15.9897461 18.4545899,15.2646484 19.5310059,15.2646484 C20.940918,15.2646484 21.5051269,16.3395996 21.5051269,17.9157715 L21.5051269,17.9157715 L21.5051269,24.1875 L25.4013672,24.1875 L25.4013672,17.465332 C25.4013672,13.8645019 23.4790039,12.1889649 20.9152832,12.1889649 Z M9.42822263,6.8125 C8.09521488,6.8125 7.22363281,7.68774412 7.22363281,8.83813475 C7.22363281,9.96313475 8.06933594,10.8632812 9.37695313,10.8632812 L9.37695313,10.8632812 L9.40234375,10.8632812 C10.7612305,10.8632812 11.6069336,9.96313475 11.6069336,8.83813475 C11.581543,7.68774412 10.7612305,6.8125 9.42822263,6.8125 Z" />
</svg>
</span><a href="#0" class="ons-list__link">LinkedIn</a>
</li>
</ul>
</nav>
</div>
</div>
</aside>Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss ‘Related content’ component on GitHub (opens in a new tab)