Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

Related links

Important information:
This pattern requires documentation.

<div class="related-links">
  <h2 class="related-links__title u-fs-r--b u-mb-xs" id="related-links">Related content</h2>
  <nav class="related-links__navigation" aria-labelledby="related-links">
    <ul class="list list--bare">
      <li class="list__item ">
        <a href="#" class="list__link ">About this service</a>
      </li>
      <li class="list__item ">
        <a href="#" class="list__link ">Help and support</a>
      </li>
      <li class="list__item ">
        <a href="#" class="list__link ">Contact us</a>
      </li>
    </ul>
  </nav>
</div>
{% from "components/related-links/_macro.njk" import onsRelatedLinks %}
{{-
    onsRelatedLinks({
        "id": 'related-links',
        "title": 'Related content',
        "itemsList": [
            {
                "url": '#',
                "text": 'About this service'
            },
            {
                "url": '#',
                "text": 'Help and support'
            },
            {
                "url": '#',
                "text": 'Contact us'
            }
        ]
    })
}}

{% macro onsRelatedLinks(params) %}
  {% from "components/lists/_macro.njk" import onsList %}
  <div class="related-links">
    <h2 class="related-links__title u-fs-r--b u-mb-xs" id="{{ params.id }}">{{ params.title }}</h2>
    <nav class="related-links__navigation" aria-labelledby="{{ params.id }}">
      {{
          onsList({
              "classes": 'list--bare',
              "itemsList": params.itemsList
          })
      }}
    </nav>
  </div>
{% endmacro %}

.related-links {
  @extend .u-mt-m;
  border-top: 5px solid $color-branded;
  padding: 1rem 0;
}

<div class="related-links">
  <h2 class="related-links__title u-fs-r--b u-mb-xs" id="related-links">Related content</h2>
  <nav class="related-links__navigation" aria-labelledby="related-links">
    <ul class="list list--bare">
      <li class="list__item ">
        <a href="#" class="list__link ">About this service</a>
      </li>
      <li class="list__item ">
        <a href="#" class="list__link ">Help and support</a>
      </li>
      <li class="list__item ">
        <a href="#" class="list__link ">Contact us</a>
      </li>
    </ul>
  </nav>
</div>
{% from "components/related-links/_macro.njk" import onsRelatedLinks %}
{{-
    onsRelatedLinks({
        "id": 'related-links',
        "title": 'Related content',
        "itemsList": [
            {
                "url": '#',
                "text": 'About this service'
            },
            {
                "url": '#',
                "text": 'Help and support'
            },
            {
                "url": '#',
                "text": 'Contact us'
            }
        ]
    })
}}

{% macro onsRelatedLinks(params) %}
  {% from "components/lists/_macro.njk" import onsList %}
  <div class="related-links">
    <h2 class="related-links__title u-fs-r--b u-mb-xs" id="{{ params.id }}">{{ params.title }}</h2>
    <nav class="related-links__navigation" aria-labelledby="{{ params.id }}">
      {{
          onsList({
              "classes": 'list--bare',
              "itemsList": params.itemsList
          })
      }}
    </nav>
  </div>
{% endmacro %}

.related-links {
  @extend .u-mt-m;
  border-top: 5px solid $color-branded;
  padding: 1rem 0;
}

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss the ‘Related links’ component on GitHub