Related content

Use this component when you want to point a user at related content.

You should include it in a small column to the side of the main content.

Open example in new window
HTML 

<div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
        <p class="govuk-body">Some content</p>
    </div>
    <div class="govuk-grid-column-one-third">

<aside class="app-related-items" role="complementary">
    <h2 class="govuk-heading-m" id="subsection-title">
      Related content
    </h2>
    <nav role="navigation" aria-labelledby="subsection-title">
        <ul class="govuk-list govuk-!-font-size-16">
          <li><a href="#">Main content</a></li>

          <li><a href="#">Homepage</a></li>

          <li><a href="#">Another link</a></li>
          </ul>
      </nav>
</aside>

    </div>
</div>
Jinja 
{%- from "design-system/components/related-content/macro.html" import dlRelatedContent %}
<div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
        <p class="govuk-body">Some content</p>
    </div>
    <div class="govuk-grid-column-one-third">
        {{ dlRelatedContent({
            "links": [
                {
                    "text": "Main content",
                    "href": "#"
                },
                {
                    "text": "Homepage",
                    "href": "#"
                },
                {
                    "text": "Another link",
                    "href": "#"
                }
            ]
        }) }}
    </div>
</div>