Status List - Component

A simple state-based variant on an unordered or ordered list.

Code

Source (Nunjucks)

<ul class="status-list" data-state="{{ data.state }}">
  {% for item in data.items %}
    <li>
      <a href="{{ item.url }}">{{ item.text }}</a>
    </li>
  {% endfor %}
</ul>

Output

<ul class="status-list" data-state="">
  <li>
    <a href="#">Overview</a>
  </li>
  <li>
    <a href="#">Web Vitals Metrics</a>
  </li>
  <li>
    <a href="#">Measure Web Vitals</a>
  </li>
  <li>
    <a href="#">Debug Web Vitals</a>
  </li>
  <li>
    <a href="#">Improve Web Vitals</a>
  </li>
  <li>
    <a href="#">Best Practices</a>
  </li>
</ul>

Information

By default, this pattern is in a success (good) state. To switch the icon to crosses, add a data-state="bad" to the pattern instance.

Variants

Bad state

View full screen

Code

Source (Nunjucks)

<ul class="status-list" data-state="{{ data.state }}">
  {% for item in data.items %}
    <li>
      <a href="{{ item.url }}">{{ item.text }}</a>
    </li>
  {% endfor %}
</ul>

Output

<ul class="status-list" data-state="bad">
  <li>
    <a href="#">Overview</a>
  </li>
  <li>
    <a href="#">Web Vitals Metrics</a>
  </li>
  <li>
    <a href="#">Measure Web Vitals</a>
  </li>
  <li>
    <a href="#">Debug Web Vitals</a>
  </li>
  <li>
    <a href="#">Improve Web Vitals</a>
  </li>
  <li>
    <a href="#">Best Practices</a>
  </li>
</ul>