---
title: List
layout: documentation
doc-tab: components
doc-subtab: list
breadcrumb:
- home
- documentation
- components
- components-list
meta:
  colors: false
  sizes: false
  variables: true
---

{% capture list_example %}
<div class="list is-hoverable">
  <a class="list-item">
    Featured
  </a>
  <a class="list-item">
    All Posts
  </a>
  <a class="list-item is-active">
    Announcements
  </a>
  <a class="list-item">
    Business
  </a>
  <a class="list-item">
    Community
  </a>
  <a class="list-item">
    Data
  </a>
  <a class="list-item">
    Editor Tools
  </a>
  <a class="list-item">
    Education
  </a>
  <a class="list-item">
    Engineering
  </a>
  <a class="list-item">
    Events
  </a>
  <a class="list-item">
    Policy
  </a>
</div>
{% endcapture %}

<div class="content">
  <p>
    The list component consists of several elements:
  </p>
</div>

{% include elements/snippet.html content=list_example more=true %}