Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
List with icon

List with icon allows the use of custom bullets that help emphasise the content in a list, for example a checklist of benefits.

The module allows any icon to be used as the bullet.

%ul
  - content_for_list_grid.each do |grid_item|
    = molecule("list_with_icon", content: { icon: 'tick', text: grid_item })
  • Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  • Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.
  • Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.

List grid

To display them in a grid you can use the list grid module.

.a-content.a-content--tight-top
  = render partial: 'shared/molecules/list_grid', locals: {grid_items: content_for_list_grid, icon: 'tick'}
  • Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  • Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.
  • Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.