1. Collections Component Guide
  2. Document list
  3. With parts
Document list example

With parts

Display child items, such as parts of guides or travel advice. Child items accept the same paramaters as parent items.

How it looks (preview)

  • Universal credit

    Universal Credit is replacing 6 other benefits with a single monthly payment if you are out of work or on a low income - eligibility, how to prepare

    • What universal credit is

      Universal Credit is a payment to help with your living costs. It’s paid monthly - or twice a month for some people in Scotland.

    • Elegibility

      You may be able to get Universal Credit if: you’re on a low income or out...

    • Criteria

      no url provided, just text

How to call this example

<%= render "govuk_publishing_components/components/document_list", {
  items: [
    {
      link: {
        text: "Universal credit",
        path: "/universal-credit",
        description: "Universal Credit is replacing 6 other benefits with a single monthly payment if you are out of work or on a low income - eligibility, how to prepare"
      },
      parts: [
        {
          link: {
            text: "What universal credit is",
            path: "/universal-credit/what-it-is",
            description: "Universal Credit is a payment to help with your living costs. It’s paid monthly - or twice a month for some people in Scotland."
          }
        },
        {
          link: {
            text: "Elegibility",
            path: "/universal-credit/eligibility",
            description: "You may be able to get Universal Credit if: you’re on a low income or out...",
            data_attributes: {
              track_category: "resultPart",
              track_action: 2,
              track_label: "Result part 2",
              track_options: {
                dimension82: 2
              }
            }
          }
        },
        {
          link: {
            text: "Criteria",
            description: "no url provided, just text"
          }
        }
      ]
    }
  ]
} %>