Navigation

<div class="nav-backdrop"></div>
    <div class="nav-modal nav-container sm-brr">
      <div class="nav-title xs-padding para-sm">Getting Started</div>
      <ul class="navigation">
        <div class="nav-cat xs-padding bold">Components</div>
        <div>
          <li class="nav-segment sm-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right xs-gutter para-sm-xs"></i
              ><span class="item xs-gutter semibold-weight">Avatar </span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Badge</span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Card</span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Images</span></a
            >
          </li>
          <li class="nav-segment sm-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right xs-gutter para-sm-xs"></i
              ><span class="item xs-gutter semibold-weight">Input </span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Navigation</span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Rating</span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Toast</span></a
            >
          </li>
          <li class="nav-segment xs-gutter">
            <a href="" class="xxs-padding"
              ><i class="fas fa-chevron-right sm-gutter para-sm-xs"></i
              ><span class="item semibold-weight">Text Utilities</span></a
            >
          </li>
        </div>