1. Static Component Guide
  2. Related items

Component

Related items

Headed sections of related items.

Accepts an array of sections. Each section can have a title, url, id and a list of related items.

Each item is a hash with a title and url. If the url is external, a rel value can also be provided.

How to call this component

<%= render "govuk_component/related_items" {
  sections: [
    {
      title: "Travel Abroad",
      url: "/",
      id: "related-travel-abroad",
      items: [
        {
          title: "Link A",
          url: "/"
        },
        {
          title: "Link B",
          url: "/"
        }
      ]
    },
    {
      title: "Travel",
      id: "related-travel",
      items: [
        {
          title: "Link 1",
          url: "/"
        },
        {
          title: "Link 2",
          url: "/"
        }
      ]
    }
  ]
} %>

How it looks

Other examples (preview all)

External links (preview)

<%= render "govuk_component/related_items" {
  sections: [
    {
      title: "Elsewhere on the web",
      id: "related-elsewhere-on-the-web",
      items: [
        {
          title: "Wikivorce",
          url: "http://www.wikivorce.com",
          rel: "external"
        }
      ]
    }
  ]
} %>

Real example (preview)

<%= render "govuk_component/related_items" {
  sections: [
    {
      title: "Pregnancy and birth",
      url: "/browse/childcare-parenting/pregnancy-birth",
      id: "related-pregnancy-and-birth",
      items: [
        {
          title: "Register a birth",
          url: "/register-birth"
        }
      ]
    },
    {
      title: "Elsewhere on GOV.UK",
      id: "related-elsewhere-on-govuk",
      items: [
        {
          title: "Check if you're a British citizen",
          url: "/check-british-citizen"
        }
      ]
    }
  ]
} %>