3.1 lists.simple List of links

Toggle example guides Toggle HTML markup

Simple link list is being used in places where there is only one row of content and there is a link where to find more. This style is usually used in areas where there is limited amount of space available for the list such as blocks.

Markup: components/list/list.twig
<div class="list {{modifier_class}}">
  <h2 class="list__title">List title</h2>
  <div class="list__content">
    <div class="list__item list__item--link">
      <a href="#">Lorem ipsum dolor sit amet</a>
    </div>
    <div class="list__item list__item--link">
      <a href="#">Lorem ipsum dolor sit amet</a>
    </div>
    <div class="list__item list__item--link">
      <a href="#">Lorem ipsum dolor sit amet</a>
    </div>
  </div>
  <a href="#">+ Show all</a>
</div>

Source: components/list/list.scss, line 1