Skip to main content

Related content

Related content is used to provide additional information for the user.

Can include single or multiple rows of related links.

Single row (default)

Open this example in a new tab  
<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'
                    }
                ]
            }
        ]

    })
}}
Name Type Required Description
title string true (false if Row provided) The title for the related content
body string true (false if Row provided) The contents of the related content. This can be a string of HTML
ariaLabel string false Descriptive landmark label to allow a screen reader user greater understanding of purpose. Defaults to Related content
classes string false Custom classes to add to the related content
rows Array<Row> false An array of Row objects

Row

Name Type Required Description
id string true id of the itemsList
title string true The title of the row
itemsList Array<ListItem> (ref) true A list of links for the row 
{% 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',
                  "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)

Open this example in a new tab  
<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'
                    }
                ]
            }
        ]

    })
}}
Name Type Required Description
title string true (false if Row provided) The title for the related content
body string true (false if Row provided) The contents of the related content. This can be a string of HTML
ariaLabel string false Descriptive landmark label to allow a screen reader user greater understanding of purpose. Defaults to Related content
classes string false Custom classes to add to the related content
rows Array<Row> false An array of Row objects

Row

Name Type Required Description
id string true id of the itemsList
title string true The title of the row
itemsList Array<ListItem> (ref) true A list of links for the row 
{% 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',
                  "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)

Open this example in a new tab  
<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 %}
Name Type Required Description
title string true (false if Row provided) The title for the related content
body string true (false if Row provided) The contents of the related content. This can be a string of HTML
ariaLabel string false Descriptive landmark label to allow a screen reader user greater understanding of purpose. Defaults to Related content
classes string false Custom classes to add to the related content
rows Array<Row> false An array of Row objects

Row

Name Type Required Description
id string true id of the itemsList
title string true The title of the row
itemsList Array<ListItem> (ref) true A list of links for the row 
{% 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',
                  "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)

Open this example in a new tab  
<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 %}
Name Type Required Description
title string true (false if Row provided) The title for the related content
body string true (false if Row provided) The contents of the related content. This can be a string of HTML
ariaLabel string false Descriptive landmark label to allow a screen reader user greater understanding of purpose. Defaults to Related content
classes string false Custom classes to add to the related content
rows Array<Row> false An array of Row objects

Row

Name Type Required Description
id string true id of the itemsList
title string true The title of the row
itemsList Array<ListItem> (ref) true A list of links for the row 
{% 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',
                  "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 

More in ‘Components’