List Component

The list component is intended for displaying a list of items. It’s intended to be used in the nav and bar components. but it can used in other places as well.

Basic Usage

<ul class="list">
  <li class="item">
    <a class="link" href="#">
      Home
    </a>
  </li>
  <li class="item">
    <a class="link" href="#">
      About
    </a>
  </li>
  <li class="item">
    <a class="link" href="#">
      Blog
    </a>
  </li>
  <li class="item">
    <a class="link" href="#">
      Contact
    </a>
  </li>
</ul>

With Icons

This example uses Font Awesome brand icons.

<ul class="list">
  <li class="item">
    <a class="link" href="#">
      <i class="fa-brands fa-facebook"></i>
    </a>
  </li>
  <li class="item">
    <a class="link" href="#">
      <i class="fa-brands fa-instagram"></i>
    </a>
  </li>
  <li class="item">
    <a class="link" href="#">
      <i class="fa-brands fa-x-twitter"></i>
    </a>
  </li>
</ul>