Content presentation - Related content

Use the related content component to provide additional information to the user.

Open this default related content example in new window
Copy default related content code 
<aside class="hs2-related-content" aria-label="Related content">

  <div class="hs2-related-content__section">

    <h2 class="hs2-related-content__title hs2-u-font-size-19 hs2-u-margin-bottom-2" id="the-route">The route</h2>

    <div class="hs2-related-content__content">

      <ul class="hs2-list hs2-u-margin-bottom-0" aria-labelledby="the-route">

        <li>

          <a href="#">High-speed network map</a>

        </li>

        <li>

          <a href="#" London to West Midlands</a>

        </li>

        <li>

          <a href="#">West Midlands to Crewe</a>

        </li>

        <li>

          <a href="#">Crewe to Manchester</a>

        </li>

        <li>

          <a href="#">West Midlands to Leeds</a>

        </li>

        <li>

          <a href="#">AcceThe North West and Scotland</a>

        </li>

      </ul>

    </div>
  </div>

  <div class="hs2-related-content__section">

    <h2 class="hs2-related-content__title hs2-u-font-size-19 hs2-u-margin-bottom-2" id="related-content">Related content</h2>

    <div class="hs2-related-content__content">

      <ul class="hs2-list hs2-u-margin-bottom-0" aria-labelledby="related-content">

        <li>

          <a href="#">What is HS2?</a>

        </li>

        <li>

          <a href="#">Building HS2</a>

        </li>

      </ul>

    </div>
  </div>

</aside>
Close default related content code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default related content
Name Type Required Description
Name ariaLabel Type string Required false Description Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to ”Related content”.
Name classes Type string Required false Description Custom classes to add to the related content aside element
Name rows Type object Required true Description Settings for an array of row objects
Name rows{}.title Type string Required true Description The text for the h2 heading for the row
Name rows{}.id Type string Required true Description The HTML id of the row heading. Connects heading to the HTML nav element using the same value for an ARIA label attribute.
Name rows{}.itemsList Type string Required true Description A list of links for the row
Name itemsList{}.text Type string Required true (false if html provided) Description The text of the list item. If text is set do not set html.
Name itemsList{}.html Type string Required false (true if text is not provided) Description The html of the list item. If html is set do not set text.
Copy default related content code 
{% from "related-content/macro.njk" import relatedContent %}

{{ relatedContent({
  "ariaLabel": 'Related content',
  "rows": [
    {
      "id": 'the-route',
      "title": 'The route',
      "itemsList": [
        {
          "html": '<a href="#">High-speed network map</a>'
        },
        {
          "html": '<a href="#"London to West Midlands</a>'
        },
        {
          "html": '<a href="#">West Midlands to Crewe</a>'
        },
        {
          "html": '<a href="#">Crewe to Manchester</a>'
        },
        {
          "html": '<a href="#">West Midlands to Leeds</a>'
        },
        {
          "html": '<a href="#">AcceThe North West and Scotland</a>'
        }
      ]
    },
    {
      "id": 'related-content',
      "title": 'Related content',
      "itemsList": [
        {
          "html": '<a href="#">What is HS2?</a>'
        },
        {
          "html": '<a href="#">Building HS2</a>'
        }
      ]
    }
  ]
}) }}
Close default related content code

How to use this component

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 relatedContentSection().

To use this approach you need to implement relatedContent() using the Nunjucks call block
You should then nest relatedContentSection() inside using call().

See the “Nunjucks” tab output for the example to see how it works.

Open this nested related content example in new window
Copy nested related content code 
<aside class="hs2-related-content" aria-label="Related content">

  <div class="hs2-related-content__section">

    <div class="hs2-related-content__content">

      <p class="hs2-u-margin-bottom-2"><strong>Freephone:</strong> 08081 434 434</p>
      <ul class="hs2-list hs2-u-margin-bottom-0">
        <li><strong>Email:</strong> <a href="HS2enquiries@hs2.org.uk">HS2enquiries@hs2.org.uk</a></li>
        <li><strong>Website:</strong> by completing our <a href="https://www.hs2.org.uk/contact-us/contact-form/">website enquiry form</a></li>
        <ul>

    </div>
  </div>

  <div class="hs2-related-content__section">

    <div class="hs2-related-content__content">

      <h3 class="hs2-u-margin-bottom-2">Live chat</h3>
      <ul class="hs2-list hs2-u-margin-bottom-0">
        <li>Monday to Friday, 10am to 5pm</li>
        <li>Saturday, 9am to 3pm</li>
        <ul>

    </div>
  </div>

</aside>
Close nested related content code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for nested related content
Name Type Required Description
Name ariaLabel Type string Required false Description Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to ”Related content”.
Name classes Type string Required false Description Custom classes to add to the related content aside element
Name rows Type object Required true Description Settings for an array of row objects
Name rows{}.title Type string Required true Description The text for the h2 heading for the row
Name rows{}.id Type string Required true Description The HTML id of the row heading. Connects heading to the HTML nav element using the same value for an ARIA label attribute.
Name rows{}.itemsList Type string Required true Description A list of links for the row
Name itemsList{}.text Type string Required true (false if html provided) Description The text of the list item. If text is set do not set html.
Name itemsList{}.html Type string Required false (true if text is not provided) Description The html of the list item. If html is set do not set text.
Copy nested related content code 
{% from "related-content/macro.njk" import relatedContent %}
{% from "related-content/section-macro.njk" import relatedContentSection %}

{% call relatedContent({"ariaLabel": 'Related content'}) %}
  {% call relatedContentSection() %}
  <p class="hs2-u-margin-bottom-2"><strong>Freephone:</strong> 08081 434 434</p>
  <ul class="hs2-list hs2-u-margin-bottom-0">
    <li><strong>Email:</strong> <a href="HS2enquiries@hs2.org.uk">HS2enquiries@hs2.org.uk</a></li>
    <li><strong>Website:</strong> by completing our <a href="https://www.hs2.org.uk/contact-us/contact-form/">website enquiry form</a></li>
  <ul>
  {% endcall %}
  {% call relatedContentSection() %}
  <h3 class="hs2-u-margin-bottom-2">Live chat</h3>
  <ul class="hs2-list hs2-u-margin-bottom-0">
    <li>Monday to Friday, 10am to 5pm</li>
    <li>Saturday, 9am to 3pm</li>
  <ul>
  {% endcall %}
{% endcall %}
Close nested related content code

Variants

Related social media links

Use the social media links variant to show the user related social media pages.

Open this socials related content example in new window
Copy socials related content code 
<aside class="hs2-related-content" aria-label="Related content">

  <div class="hs2-related-content__section">

    <div class="hs2-related-content__content">

      <h2 class="hs2-u-font-size-22 hs2-u-margin-bottom-2">Share this post</h2>

      <ul class="hs2-list hs2-list--bare">

        <li class="hs2-list__item hs2-u-display-flex hs2-u-align-items-center">
          <span aria-hidden="true">
            <svg id="icon-facebook" class="hs2-icon--size-25" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
              <path fill="#1d70b8" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
            </svg>
          </span>
          <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fa-page-to-share" class="hs2-list__link" target="_blank">Facebook<span class="hs2-u-visually-hidden"> (opens in a new tab)</span>
          </a>
        </li>

        <li class="hs2-list__item hs2-u-display-flex hs2-u-align-items-center">
          <span aria-hidden="true">
            <svg class="hs2-icon--size-25" id="icon-twitter" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
              <path fill="#1d70b8" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
            </svg>
          </span>
          <a href="twitter.url" class="hs2-list__link" target="_blank">Twitter<span class="hs2-u-visually-hidden"> (opens in a new tab)</span>
          </a>
        </li>

      </ul>

    </div>
  </div>

</aside>
Close socials related content code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for socials related content
Name Type Required Description
Name ariaLabel Type string Required false Description Descriptive landmark ARIA label to give a screen reader user greater understanding of its purpose. Defaults to ”Related content”.
Name classes Type string Required false Description Custom classes to add to the related content aside element
Name rows Type object Required true Description Settings for an array of row objects
Name rows{}.title Type string Required true Description The text for the h2 heading for the row
Name rows{}.id Type string Required true Description The HTML id of the row heading. Connects heading to the HTML nav element using the same value for an ARIA label attribute.
Name rows{}.itemsList Type string Required true Description A list of links for the row
Name itemsList{}.text Type string Required true (false if html provided) Description The text of the list item. If text is set do not set html.
Name itemsList{}.html Type string Required false (true if text is not provided) Description The html of the list item. If html is set do not set text.
Copy socials related content code 
{% from "related-content/macro.njk" import relatedContent %}
{% from "related-content/section-macro.njk" import relatedContentSection %}
{% from "share-page/macro.njk" import sharePage %}

{% call relatedContent({"ariaLabel": 'Related content'}) %}
  {% call relatedContentSection() %}
  {{
    sharePage({
      "title": 'Share this post',
      "pageTitle": 'A page to share',
      "pageURL": 'https://example.com/a-page-to-share',
      "facebook": true,
      "twitter": true
    })
  }}
  {% endcall %}
{% endcall %}
Close socials related content code