Lists

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Similar pages</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class="fa fa-angle-right"></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class="fa fa-angle-right"></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class="fa fa-angle-right"></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class="fa fa-angle-right"></i> Counter</a></li>
          <li><a href="/ui/select/"><i class="fa fa-angle-right"></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class="fa fa-angle-right"></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class="fa fa-angle-right"></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class="fa fa-angle-right"></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class="fa fa-angle-right"></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class="fa fa-angle-right"></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class="fa fa-angle-right"></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class="fa fa-angle-right"></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class="fa fa-angle-right"></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class="fa fa-angle-right"></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class="fa fa-angle-right"></i> Typography</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-list">
        <p class="widget-title h5">Shortcuts</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class="fa fa-angle-double-right"></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class="fa fa-angle-double-right"></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class="fa fa-angle-double-right"></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class="fa fa-angle-double-right"></i> Counter</a></li>
          <li><a href="/ui/select/"><i class="fa fa-angle-double-right"></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class="fa fa-angle-double-right"></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class="fa fa-angle-double-right"></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class="fa fa-angle-double-right"></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class="fa fa-angle-double-right"></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class="fa fa-angle-double-right"></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class="fa fa-angle-double-right"></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class="fa fa-angle-double-right"></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class="fa fa-angle-double-right"></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class="fa fa-angle-double-right"></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class="fa fa-angle-double-right"></i> Typography</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-0">
      <div class="widget widget-list">
        <p class="widget-title h5">Links</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class="fa fa-caret-right"></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class="fa fa-caret-right"></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class="fa fa-caret-right"></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class="fa fa-caret-right"></i> Counter</a></li>
          <li><a href="/ui/select/"><i class="fa fa-caret-right"></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class="fa fa-caret-right"></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class="fa fa-caret-right"></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class="fa fa-caret-right"></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class="fa fa-caret-right"></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class="fa fa-caret-right"></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class="fa fa-caret-right"></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class="fa fa-caret-right"></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class="fa fa-caret-right"></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class="fa fa-caret-right"></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class="fa fa-caret-right"></i> Typography</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-0 col-md-2">
      <div class="widget widget-list">
        <p class="widget-title h5">List with icons</p>
        <ul>
          <li><a href="/elements/attention-box/"><i class='fa fa-fw fa-exclamation-circle'></i> Attention Box</a></li>
          <li><a href="/ui/buttons/"><i class='fa fa-fw fa-toggle-off'></i> Buttons</a></li>
          <li><a href="/elements/countdown/"><i class='fa fa-fw fa-hourglass-start'></i> Countdown</a></li>
          <li><a href="/elements/counter/"><i class='fa fa-fw fa-lightbulb-o'></i> Counter</a></li>
          <li><a href="/ui/select/"><i class='fa fa-fw fa-level-down'></i> Select (dropdown)</a></li>
          <li><a href="/elements/forms/"><i class='fa fa-fw fa-at'></i> Forms</a></li>
          <li><a href="/elements/heading/"><i class='fa fa-fw fa-header'></i> Headings</a></li>
          <li><a href="/elements/icon-box/"><i class='fa fa-fw fa-cog'></i> Icon Boxes</a></li>
          <li><a href="/elements/map/"><i class='fa fa-fw fa-location-arrow'></i> Map</a></li>
          <li><a href="/elements/mosaic/"><i class='fa fa-fw fa-puzzle-piece'></i> Mosaic</a></li>
          <li><a href="/ui/parallax/"><i class='fa fa-fw fa-cube'></i> Parallax</a></li>
          <li><a href="/elements/progress/"><i class='fa fa-fw fa-tasks'></i> Progress</a></li>
          <li><a href="/elements/steps/"><i class='fa fa-fw fa-arrow-right'></i> Process Steps</a></li>
          <li><a href="/elements/testimonials/"><i class='fa fa-fw fa-quote-left'></i> Testimonials</a></li>
          <li><a href="/ui/typography/"><i class='fa fa-fw fa-font'></i> Typography</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>