Contents list example

With custom title

With this option, the ‘Contents’ title is replaced with the supplied alternate title. This should only be used when using this component as a navigation element on landing pages. Typically used with alternative_line_style.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/contents_list", {
  title: "An alternate title",
  contents: [
    {
      href: "#first-thing",
      text: "First page title link"
    },
    {
      href: "#second-thing",
      text: "Second page title link"
    },
    {
      href: "#third-thing",
      text: "Third page title link",
      active: true
    },
    {
      href: "#fourth-thing",
      text: "Fourth page title link"
    },
    {
      href: "#fifth-thing",
      text: "Fifth page title link"
    }
  ]
} %>