Skip to main content

Related links

Important information:
This pattern requires documentation.
<div class="ons-related-links">
  <h2 class="ons-related-links__title ons-u-fs-r--b ons-u-mb-xs" id="related-links">Related content</h2>
  <nav class="ons-related-links__navigation" aria-labelledby="related-links">
    <ul class="ons-list ons-list--bare">
      <li class="ons-list__item">
        <a href="#" class="ons-list__link  ">About this service</a>
      </li>
      <li class="ons-list__item">
        <a href="#" class="ons-list__link  ">Help and support</a>
      </li>
      <li class="ons-list__item">
        <a href="#" class="ons-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="ons-related-links">
    <h2 class="ons-related-links__title ons-u-fs-r--b ons-u-mb-xs" id="{{ params.id }}">{{ params.title }}</h2>
    <nav class="ons-related-links__navigation" aria-labelledby="{{ params.id }}">
      {{
          onsList({
              "variants": 'bare',
              "itemsList": params.itemsList
          })
      }}
    </nav>
  </div>
{% endmacro %}
.ons-related-links {
  @extend .ons-u-mt-m;

  border-top: 5px solid $color-branded;
  padding: 1rem 0;
}
<div class="ons-related-links">
  <h2 class="ons-related-links__title ons-u-fs-r--b ons-u-mb-xs" id="related-links">Related content</h2>
  <nav class="ons-related-links__navigation" aria-labelledby="related-links">
    <ul class="ons-list ons-list--bare">
      <li class="ons-list__item">
        <a href="#" class="ons-list__link  ">About this service</a>
      </li>
      <li class="ons-list__item">
        <a href="#" class="ons-list__link  ">Help and support</a>
      </li>
      <li class="ons-list__item">
        <a href="#" class="ons-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="ons-related-links">
    <h2 class="ons-related-links__title ons-u-fs-r--b ons-u-mb-xs" id="{{ params.id }}">{{ params.title }}</h2>
    <nav class="ons-related-links__navigation" aria-labelledby="{{ params.id }}">
      {{
          onsList({
              "variants": 'bare',
              "itemsList": params.itemsList
          })
      }}
    </nav>
  </div>
{% endmacro %}
.ons-related-links {
  @extend .ons-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