List styles

Collection: Components

Horizontal style

Example

See more

<ul class="list-horizontal">
  <!-- List item  -->
    <li>
      <article>
        <h3>
          <a href="#">Digital Transformation Agency</a>
        </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
      </article>
    </li>
    <!-- List item with metadata no image -->
    <li>
      <article>
        <h3>
          <a href="#">Digital Transformation Agency</a>
        </h3>
        <div class="meta">
          <time datetime="2016-10-28 00:00">28 October 2016</time>
          <a href="#" rel="author">Jane Blog</a>
        </div>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
        <footer class="tags">
          <dl>
            <dt>Topics:</dt>
            <dd><a href="#">Tag Name</a></dd>
            <dd><a href="#">Tag Name</a></dd>
            <dd><a href="#">Tag Name</a></dd>
          </dl>
        </footer>
      </article>
    </li>
  <!-- Hero list item -->
  <li class="hero-item">
    <figure>
      <img src="http://placehold.it/600x338?text=Placeholder" alt="Example image"/>
    </figure>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <!-- List item with an image -->
  <li>
    <figure>
      <img src="http://placehold.it/600x338?text=Placeholder" alt="Example image"/>
    </figure>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <div class="meta">
        <time datetime="2016-10-28 00:00">28 October 2016</time>
        <a href="#" rel="author">Jane Blog</a>
      </div>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
      <footer class="tags">
        <dl>
          <dt>Topics:</dt>
            <dd><a href="#">Tag Name</a></dd>
            <dd><a href="#">Tag Name</a></dd>
            <dd><a href="#">Tag Name</a></dd>
        </dl>
      </footer>
    </article>
  </li>
  <!-- List item with no image where there should be one -->
  <li>
    <figure>
    </figure>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <div class="meta">
        <time datetime="2016-10-28 00:00">28 October 2016</time>
        <a href="#" rel="author">Jane Blog</a>
      </div>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
      <footer class="tags">
        <dl>
          <dt>Topics:</dt>
            <dd><a href="#">Tag Name</a></dd>
            <dd><a href="#">Tag Name</a></dd>
            <dd><a href="#">Tag Name</a></dd>
        </dl>
      </footer>
    </article>
  </li>
</ul>
<p><a class="see-more" href="#">See more</a></p>

Vertical style

By default the vertical lists are displayed in 2 columns.

You can change the number of columns used:

  • .vertical-list--thirds give 3 columns of list items
  • .vertical-list--fourths give 4 columns of list items.

For browsers that don't support Flexbox layout lists will appear as in horizontal style with images (if used) below each list item.

Example

Vertical style

Vertical style — thirds

Vertical style — fourths

See more

<h3>Vertical style</h3>
<ul class="list-vertical">
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <div class="meta">
        <time datetime="2016-10-28 00:00">28 October 2016</time>
        <a href="#" rel="author">Jane Blog</a>
      </div>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <div class="meta">
        <time datetime="2016-10-28 00:00">28 October 2016</time>
        <a href="#" rel="author">Jane Blog</a>
      </div>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
    <figure>
      <img src="http://placehold.it/600x338?text=Placeholder" alt="Example image"/>
    </figure>
  </li>
</ul>
<h3>Vertical style &mdash; thirds</h3>
<ul class="list-vertical--thirds">
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
</ul>
<h3>Vertical style &mdash; fourths</h3>
<ul class="list-vertical--fourths">
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
  <li>
    <article>
      <h3>
        <a href="#">Digital Transformation Agency</a>
      </h3>
      <p>Simpler, clearer, faster government services [&hellip;]</p>
    </article>
  </li>
</ul>

<p><a class="see-more" href="#">See more</a></p>

Small list style

Use small list style for large groups of list items.

<ul class="list-small">
  <li>
    <a href="#">
      <div class="meta">
        <time datetime="2016-10-28 00:00">28 October 2016</time>
      </div>
      <span>Digital Transformation Agency</span>
    </a>
  </li>
  <li>
    <a href="#"><span>Digital Transformation Agency</span></a>
  </li>
</ul>
<p><a class="see-more" href="#">See more</a></p>

Highlighted words style

Use highlighted words style for a list with repeating phrases.

<ul class="list-highlighted">
  <li>
    <a href="#"><span>Department of </span>Agriculture and Water Resources</a>
  </li>
  <li>
    <a href="#"><span>Department of </span>Communications and the Arts</a>
  </li>
</ul>