Document list example

With equal item spacing

The new search UI has consistently equal spacing between items in the document list, instead of the original larger bottom padding.

How it looks (preview)

  • Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.

  • Becoming a journeyman - what to expect, what to take, pay and training, making an application, complaining about being a journeyman.

  • Becoming enlightened - what to expect, what to take, pay and training, making an application, complaining about being enlightened.

How to call this example

<%= render "govuk_publishing_components/components/document_list", {
  equal_item_spacing: true,
  items: [
    {
      link: {
        text: "Become an apprentice",
        path: "/become-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.",
        full_size_description: true
      }
    },
    {
      link: {
        text: "Become a journeyman",
        path: "/become-a-journeyman",
        description: "Becoming a journeyman - what to expect, what to take, pay and training, making an application, complaining about being a journeyman.",
        full_size_description: true
      }
    },
    {
      link: {
        text: "Become enlightened",
        path: "/become-enlightened",
        description: "Becoming enlightened - what to expect, what to take, pay and training, making an application, complaining about being enlightened.",
        full_size_description: true
      }
    }
  ]
} %>