DFE-Digital/govuk-components

---
title: List
---

markdown:
  Use this helper to generate different types of lists.

== render('/partials/example.*',
  caption: "Plain lists",
  code: govuk_list_plain) do

  markdown:
    You can create a plain list with no bullets or numbers by passing an array of items to the `govuk_list` helper.

== render('/partials/example.*',
  caption: "Bulleted lists",
  code: govuk_list_bullet) do

  markdown:
    To make a list bulleted, add `type: :bullet`

== render('/partials/example.*',
  caption: "Numbered lists",
  code: govuk_list_number) do

  markdown:
    To make a list numbered, add `type: :number`. This will also change the HTML to use an ordered list tag (`<ol>`).

== render('/partials/example.*',
  caption: "Adding extra spacing between list items",
  code: govuk_list_spaced) do

  markdown:
    If a list is hard to read because the items run across multiple lines you can add extra spacing by adding `spaced: true`.

    You can also pass the list content to the helper as a block. This can make your code easier to read, but you will need to include your own `<li>` tags.