List

Use this helper to generate different types of lists.

Plain lists

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

Input

= govuk_list [govuk_link_to("News", "#"), govuk_link_to("Publications", "#")]

<%= govuk_list [govuk_link_to("News", "#"), govuk_link_to("Publications", "#")] %>

Output

<ul class="govuk-list">
  <li>
    <a class="govuk-link" href="#">
      News
    </a>
  </li>
  <li>
    <a class="govuk-link" href="#">
      Publications
    </a>
  </li>
</ul>

Bulleted lists

To make a list bulleted, add type: :bullet

Input

= govuk_list ["apples", "oranges", "pears"], type: :bullet

<%= govuk_list ["apples", "oranges", "pears"], type: :bullet %>

Output

• apples
• oranges
• pears

<ul class="govuk-list govuk-list--bullet">
  <li>
    apples
  </li>
  <li>
    oranges
  </li>
  <li>
    pears
  </li>
</ul>

Numbered lists

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

Input

= govuk_list ["Delivery address.", "Payment.", "Confirmation."], type: :number

<%= govuk_list ["Delivery address.", "Payment.", "Confirmation."], type: :number %>

Output

1. Delivery address.
2. Payment.
3. Confirmation.

<ol class="govuk-list govuk-list--number">
  <li>
    Delivery address.
  </li>
  <li>
    Payment.
  </li>
  <li>
    Confirmation.
  </li>
</ol>

Adding extra spacing between list items

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.

Input

= tag.p "You will have to apply the reverse charge if you supply any of these services:"
= govuk_list type: :bullet, spaced: true do
  = tag.li "constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services"
  = tag.li "pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence"

<%= tag.p "You will have to apply the reverse charge if you supply any of these services:" %>
<%= govuk_list type: :bullet, spaced: true do %>
  <%= tag.li "constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services" %>
  <%= tag.li "pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence" %>
<% end %>

Output

You will have to apply the reverse charge if you supply any of these services:

• constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
• pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence

<p>
  You will have to apply the reverse charge if you supply any of these services:
</p>
<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
  <li>
    constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
  </li>
  <li>
    pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence
  </li>
</ul>