List example

With margin

Sets the margin on the bottom of the list element.

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a 20px margin.

How it looks (preview)

• Tony’s Chocolonely
• Cherry Ripe
• Snickers
• Chomp
• Penguin
• Boost

How to call this example

<%= render "govuk_publishing_components/components/list", {
  margin_bottom: 9,
  items: [
    sanitize("Tony&rsquo;s Chocolonely"),
    sanitize("<a href=\"https://en.wikipedia.org/wiki/Cherry_Ripe_(chocolate_bar)\" rel=\"noopener\" class=\"govuk-link\">Cherry Ripe</a>"),
    "Snickers",
    "Chomp",
    "Penguin",
    "Boost"
  ]
} %>