Contents list example

With alternative line style

With this option, the individual lines get different styling. The left hand indent and dashes are removed, there’s more vertical space between each list item and the active links are styled with a vertical left hand border.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/contents_list", {
  alternative_line_style: true,
  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"
    }
  ]
} %>