UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

github.com/Altinn/DesignSystem

Altinn/DesignSystem

1,437 lines • 63.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- basic page needs -->
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- fort awesome styling/rendering support -->
  <link rel="stylesheet" media="all" href="http://kit-download-assets.fortawesome.com/application.css">

  <!-- css -->
  <link href="css/external.css" rel="stylesheet">

  <!-- older browser support -->
  <!--[if lt IE 9]> <link href="ed31cded-sd.css" rel="stylesheet"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
</head>

<body class="v-kit-demo bg-gray-lightest bg-img bg-img-icons">
  <div class="wrapper-view">
    <div class="view-content">

      <div class="bg-gray-dark p-xs-a-xl">
        <div class="container text-xs-center">
          <h2 class="text-3x font-weight-semibold">
            <span class="text-sm text-upper text-tracked m-xs-b-md block text-muted">Fort Awesome Kit Demo</span>
            altinn.no
          </h2>
          <p class="lead m-xs-b-0">Below you'll find an inventory and examples of
            
            <a href="#demo-icons">icons</a>,
            
            
            and how to use them and the support styling.
          </p>
        </div>
      </div>

      <div class="dangle-up bg-gray-dark dashed dashed-bottom"></div>

      <div class="container m-xs-b-lg">
        <div class="well bg-white br-b-0 p-xs-a-lg m-xs-b-0">
          <div class="alert alert-info bg-body m-xs-b-lg" role="alert">
            <p class="m-xs-b-0">This demo is a live example of what your kit can do. Read up on how things are organized in <a href="README.md">your README</a>. See how anything is specifically working by <strong>viewing this page's source</strong>.</p>
          </div>

          <section class="demo-icons m-xs-b-xl" id="demo-icons">
            <h2 class="text-xl m-xs-b-0">Your Icons</h2>
            <hr class="hr-lg m-xs-y-md">

            
            <ul class="grid-assets grid-assets-animate grid-assets-xs-6 m-xs-b-lg">
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf008;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-download</span>
                  <span class="text-muted block">f008</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf009;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-arrowrightup</span>
                  <span class="text-muted block">f009</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf017;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-money</span>
                  <span class="text-muted block">f017</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf019;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-skatteetaten</span>
                  <span class="text-muted block">f019</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf01a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-aordningen</span>
                  <span class="text-muted block">f01a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf01b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-phone</span>
                  <span class="text-muted block">f01b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf01f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-sign</span>
                  <span class="text-muted block">f01f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf020;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-write</span>
                  <span class="text-muted block">f020</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf021;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-read</span>
                  <span class="text-muted block">f021</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf023;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-archive</span>
                  <span class="text-muted block">f023</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf026;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plus</span>
                  <span class="text-muted block">f026</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf027;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-corp</span>
                  <span class="text-muted block">f027</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf028;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-private</span>
                  <span class="text-muted block">f028</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf029;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-others</span>
                  <span class="text-muted block">f029</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf02a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-deadline</span>
                  <span class="text-muted block">f02a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf02b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-tax</span>
                  <span class="text-muted block">f02b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf02c;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-exit</span>
                  <span class="text-muted block">f02c</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf02d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-search</span>
                  <span class="text-muted block">f02d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf02e;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-back</span>
                  <span class="text-muted block">f02e</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf030;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-expand</span>
                  <span class="text-muted block">f030</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf031;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-undo</span>
                  <span class="text-muted block">f031</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf032;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-openmessage</span>
                  <span class="text-muted block">f032</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf033;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-closedmessage</span>
                  <span class="text-muted block">f033</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf034;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-help</span>
                  <span class="text-muted block">f034</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf035;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-edit</span>
                  <span class="text-muted block">f035</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf036;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-document</span>
                  <span class="text-muted block">f036</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf037;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-settings</span>
                  <span class="text-muted block">f037</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf039;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-server</span>
                  <span class="text-muted block">f039</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf03a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-info</span>
                  <span class="text-muted block">f03a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf03d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-arrowright</span>
                  <span class="text-muted block">f03d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf03e;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-keyhole</span>
                  <span class="text-muted block">f03e</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf03f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-expand-circle</span>
                  <span class="text-muted block">f03f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf040;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-exit</span>
                  <span class="text-muted block">f040</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf041;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-upload</span>
                  <span class="text-muted block">f041</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf042;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-help-popicon</span>
                  <span class="text-muted block">f042</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf043;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-check</span>
                  <span class="text-muted block">f043</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf046;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-plus</span>
                  <span class="text-muted block">f046</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf047;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-minus</span>
                  <span class="text-muted block">f047</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf049;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-facebook</span>
                  <span class="text-muted block">f049</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf04a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-twitter</span>
                  <span class="text-muted block">f04a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf04b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-linkedin</span>
                  <span class="text-muted block">f04b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf04c;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-date</span>
                  <span class="text-muted block">f04c</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf04d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-send</span>
                  <span class="text-muted block">f04d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf04f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-info-circle</span>
                  <span class="text-muted block">f04f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf052;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-check-circle</span>
                  <span class="text-muted block">f052</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf053;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-attachment</span>
                  <span class="text-muted block">f053</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf054;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-forward</span>
                  <span class="text-muted block">f054</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf055;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-trash</span>
                  <span class="text-muted block">f055</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf056;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circle-exclamation</span>
                  <span class="text-muted block">f056</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf057;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-family</span>
                  <span class="text-muted block">f057</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf058;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-more</span>
                  <span class="text-muted block">f058</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf059;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-archive-alt</span>
                  <span class="text-muted block">f059</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf05a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-print</span>
                  <span class="text-muted block">f05a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf05b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-client</span>
                  <span class="text-muted block">f05b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf05d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-a</span>
                  <span class="text-muted block">f05d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf05e;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-b</span>
                  <span class="text-muted block">f05e</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf05f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-c</span>
                  <span class="text-muted block">f05f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf060;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-d</span>
                  <span class="text-muted block">f060</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf061;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-e</span>
                  <span class="text-muted block">f061</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf062;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-f</span>
                  <span class="text-muted block">f062</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf063;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-g</span>
                  <span class="text-muted block">f063</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf064;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-h</span>
                  <span class="text-muted block">f064</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf065;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-i</span>
                  <span class="text-muted block">f065</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf066;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-j</span>
                  <span class="text-muted block">f066</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf067;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-k</span>
                  <span class="text-muted block">f067</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf068;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-u</span>
                  <span class="text-muted block">f068</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf069;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-v</span>
                  <span class="text-muted block">f069</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf06a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-w</span>
                  <span class="text-muted block">f06a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf06b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-x</span>
                  <span class="text-muted block">f06b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf06c;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-y</span>
                  <span class="text-muted block">f06c</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf06d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-l</span>
                  <span class="text-muted block">f06d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf06e;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-m</span>
                  <span class="text-muted block">f06e</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf06f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-n</span>
                  <span class="text-muted block">f06f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf070;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-o</span>
                  <span class="text-muted block">f070</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf071;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-p</span>
                  <span class="text-muted block">f071</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf072;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-q</span>
                  <span class="text-muted block">f072</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf073;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-r</span>
                  <span class="text-muted block">f073</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf074;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-s</span>
                  <span class="text-muted block">f074</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf075;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-t</span>
                  <span class="text-muted block">f075</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf076;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-z</span>
                  <span class="text-muted block">f076</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf077;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-ae</span>
                  <span class="text-muted block">f077</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf078;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-oo</span>
                  <span class="text-muted block">f078</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf079;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-letter-aa</span>
                  <span class="text-muted block">f079</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf07a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-keyhole-circle</span>
                  <span class="text-muted block">f07a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf07b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-private-circle-big</span>
                  <span class="text-muted block">f07b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf07d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plain-circle</span>
                  <span class="text-muted block">f07d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf07e;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plain-circle-big</span>
                  <span class="text-muted block">f07e</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf07f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-corp-circle-big</span>
                  <span class="text-muted block">f07f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf080;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-lock-open</span>
                  <span class="text-muted block">f080</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf081;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-locked</span>
                  <span class="text-muted block">f081</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf082;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-plain-circle-test</span>
                  <span class="text-muted block">f082</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf083;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-exit-test</span>
                  <span class="text-muted block">f083</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf084;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-stop</span>
                  <span class="text-muted block">f084</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf085;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-government</span>
                  <span class="text-muted block">f085</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf086;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-government-circle-big</span>
                  <span class="text-muted block">f086</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf087;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circletrash</span>
                  <span class="text-muted block">f087</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf088;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circlecancel</span>
                  <span class="text-muted block">f088</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf089;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-circlecheck</span>
                  <span class="text-muted block">f089</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf08a;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-arrow-down</span>
                  <span class="text-muted block">f08a</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf08b;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-knapplogikk</span>
                  <span class="text-muted block">f08b</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf08c;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-knapppreview</span>
                  <span class="text-muted block">f08c</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf08d;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-favourite</span>
                  <span class="text-muted block">f08d</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf08e;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-favourite-inactive</span>
                  <span class="text-muted block">f08e</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf08f;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-favourite-inactive-alt</span>
                  <span class="text-muted block">f08f</span>
                </div>
              </li>
              
              <li class="asset asset-icon">
                <div class="icon-preview">
                  <i class="ai ai-lg">&#xf090;</i>
                </div>
                <div class="icon-label text-base">
                  <span class="text-gray-darker font-weight-semibold block m-xs-b-xs">ai-favourite-selected</span>
                  <span class="text-muted block">f090</span>
                </div>
              </li>
              
            </ul>

            <h3 class="text-lg m-xs-b-md">Using your icons on the web</h3>
            <div class="row m-xs-b-lg">
              <div class="col-xs-9">
                <p>You can place your Fort Awesome icons just about anywhere using your CSS kit prefix<codeai</code> and the icon's name. Fort Awesome icons are designed to be used with inline elements (we like the <code>&lt;i&gt;</code> tag, but you can use ><code>&lt;span&gt;</code> too).</p>

                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <pre class="bg-gray-dark inset-darkest br-b p-xs-a-md br-t-0"><code class="html"><span class="nt">&lt;i</span><span class="na"> class=</span><span class="s">"ai ai-letter-t"</span><span class="nt">&gt;&lt;/i&gt;</span></code></pre>

                <div class="alert alert-info bg-body m-xs-b-0">
                  <p class="m-xs-b-0">If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else you can imagine with CSS.</p>
                </div>
              </div>

              <div class="col-xs-3">
                <p class="m-xs-b-0 text-sm m-xs-t-2x">Still need help getting started? Check out <a target="_blank" href="https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a">our how-to article on using icons</a>.</p>
              </div>
            </div>

            <h3 class="text-lg m-xs-b-md">Icon Styling Support</h3>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">Larger Icons</h4>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <p>
                    <i class="ai ai-letter-t ai-lg"></i> ai-lg
                  </p>
                  <p>
                    <i class="ai ai-letter-t ai-2x"></i> ai-2x
                  </p>
                  <p>
                    <i class="ai ai-letter-t ai-3x"></i> ai-3x
                  </p>
                  <p>
                    <i class="ai ai-letter-t ai-4x"></i> ai-4x
                  </p>
                  <p>
                    <i class="ai ai-letter-t ai-5x"></i> ai-5x
                  </p>
                </div>
              </div>
            </div>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">Fixed Width Icons</h4>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <div class="list-group m-xs-b-0">
                    <a class="list-group-item" href="#">
                      <i class="ai ai-letter-t ai-fw"></i>
                      &nbsp; Home
                    </a>
                    <a class="list-group-item" href="#">
                      <i class="ai ai-letter-t ai-fw"></i>
                      &nbsp; Library
                    </a>
                    <a class="list-group-item" href="#">
                      <i class="ai ai-letter-t ai-fw"></i>
                      &nbsp; Applications
                    </a>
                    <a class="list-group-item" href="#">
                      <i class="ai ai-letter-t ai-fw"></i>
                      &nbsp; Settings
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">List Icons</h4>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <ul class="ai-ul m-xs-b-0">
                    <li>
                      <i class="ai-li ai ai-letter-t"></i>
                      List icons
                    </li>
                    <li>
                      <i class="ai-li ai ai-letter-t"></i>
                      can be used
                    </li>
                    <li>
                      <i class="ai-li ai ai-letter-t ai-spin"></i>
                      as bullets
                    </li>
                    <li>
                      <i class="ai-li ai ai-letter-t"></i>
                      in lists
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">Bordered &amp; Pulled Icons</h4>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <i class="ai ai-letter-t ai-3x pull-left ai-border"></i>
                  Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter—tomorrow we will run [kit_prefix]ster, stretch out our arms [kit_prefix]rther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
                </div>
              </div>
            </div>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">Animated Icons</h4>

                <p>
                  <strong>Note:</strong> We like using these animated classes with things like <a href="https://fortawesome.com/sets?q=spinner">spinners</a>, <a href="https://fortawesome.com/sets?q=gear">gears</a>, and <a href="https://fortawesome.com/sets?q=load">loaders</a>.
                </p>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <button class="btn btn-secondary btn-lg">
                    <i class="ai ai-letter-t ai-spin"></i>
                  </button>
                  <button class="btn btn-secondary btn-lg">
                    <i class="ai ai-letter-t ai-spin"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">Rotated &amp; Flipped</h4>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <div>
                    <i class="ai ai-letter-t"></i>&nbsp; normal<br>
                    <i class="ai ai-letter-t ai-rotate-90"></i>&nbsp;

                    fa-rotate-90<br>
                    <i class="ai ai-letter-t ai-rotate-180"></i>&nbsp;

                    fa-rotate-180<br>
                    <i class="ai ai-letter-t ai-rotate-270"></i>&nbsp;

                    fa-rotate-270<br>
                    <i class="ai ai-letter-t ai-flip-horizontal"></i>&nbsp;

                    fa-flip-horizontal<br>
                    <i class="ai ai-letter-t ai-flip-vertical"></i>&nbsp;

                    fa-flip-vertical
                  </div>
                </div>
              </div>
            </div>

            <div class="row m-xs-b-lg">
              <div class="col-xs-3 col-xs-push-9">
                <h4 class="m-xs-b-0 text-muted text-base">Stacked Icons</h4>
              </div>
              <div class="col-xs-9 col-xs-pull-3">
                <div class="well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0 p-xs-a-sm">
                  <span class="text-sm font-weight-bold">Example</span>
                </div>
                <div class="well bg-body text-sm br-t-0 m-xs-b-0">
                  <span class="ai-stack ai-lg">
                    <i class="ai ai-letter-t ai-stack-2x"></i>
                    <i class="ai ai-letter-t ai-stack-1x"></i>
                  </span>
                </div>
              </div>
            </div>
            
          </section>

          <section class="demo-typefaces m-xs-b-xl" id="demo-typefaces">
            <h2 class="text-xl m-xs-b-0">Your Typefaces</h2>
            <hr class="hr-lg m-xs-y-md">

            
            <div class="well bg-primary bg-img bg-img-icons p-xs-a-2x m-xs-b-lg text-xs-center">
              <h2 class="text-2x">This Kit Doesn't Have Any Typefaces</h2>
              <p class="lead m-xs-b-0 text-muted">Hey. It looks like you don't have any typefaces currently in this kit. Its pretty easy to <a href="https://fortawesome.com/kits/ed31cded/typefaces/new" class="text-white">add some</a> or even <a href="https://fortawesome.com/typefaces/ed31cded/icons/upload" class="text-white">upload your own</a>.</p>
            </div>
            
          </section>
        </div>

        <div class="well br-t-0 bg-body p-xs-a-lg dashed dashed-top">
          <section class="demo-meta m-xs-b-xl" id="demo-meta">
            <div class="row">
              <div class="col-xs-4 p-xs-x-md">
                <h2 class="text-base text-muted">Bits About This Kit</h2>
                <hr class="m-xs-y-sm">

                <div class="gg gg-middle m-xs-b-md">
                  <div class="gg-row">
                    <div class="gg-col p-xs-y-xs p-xs-r-md">
                      <span class="text-muted">Kit Name:</span>
                    </div>
                    <div class="gg-col p-xs-y-xs">
                      altinn.no
                    </div>
                  </div>

                  <div class="gg-row">
                    <div class="gg-col p-xs-y-xs p-xs-r-md">
                      <span class="text-muted">Kit ID:</span>
                    </div>
                    <div class="gg-col p-xs-y-xs">
                      ed31cded
                    </div>
                  </div>

                  
                  <div class="gg-row">
                    <div class="gg-col p-xs-y-xs p-xs-r-md">
                      <span class="text-muted">Icon Prefix:</span>
                    </div>
                    <div class="gg-col p-xs-y-xs">
                      ai
                    </div>
                  </div>
                  

                  <div class="gg-row">
                    <div class="gg-col p-xs-y-xs p-xs-r-md">
                      <span class="text-muted">Icons:</span>
                    </div>
                    <div class="gg-col p-xs-y-xs">
                      
                      105
                      
                    </div>
                  </div>

                  <div class="gg-row">
                    <div class="gg-col p-xs-y-xs p-xs-r-md">
                      <span class="text-muted">Typefaces:</span>
                    </div>
                    <div class="gg-col p-xs-y-xs">
                      
                      0 <a class="m-xs-l-sm text-sm" href="https://fortawesome.com/kits/ed31cded/typefaces/new">Add some <span class="sr-only">typefaces</span></a>
                      
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-xs-4 p-xs-x-md">
                <h2 class="text-base text-muted">Documentation &amp; Support</h2>
                <hr class="m-xs-y-sm">

                <p>
                  This kit has extensive documentation for use on the web and on the desktop. Check out <a class="word-wrap" href="https://fortawesome.com/share/eyJhbGciOiJIUzI1NiJ9.eyJraXQiOiJlZDMxY2RlZCJ9.ggJFjF1S2edTtzzsI3fzIvLUd0xzCpDqL1Ddptk_aBI/kit-documentation">https://fortawesome.com/share/eyJhbGciOiJIUzI1NiJ9.eyJraXQiOiJlZDMxY2RlZCJ9.ggJFjF1S2edTtzzsI3fzIvLUd0xzCpDqL1Ddptk_aBI/kit-documentation</a>.
                </p>

                <p>
                  Need an example or walkthrough? Check out our Fort Awesome how-to guides on
                  <a href="https://articles.fortawesome.com/how-to-fort-awesome-assets-on-the-desktop-e3fd15df6f43">desktop use</a>,
                  <a href="https://articles.fortawesome.com/how-to-serve-fort-awesome-assets-yourself-5419b88ee2d4">serving things yourself</a>, and
                  <a href="https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a">basic icon use</a>.
                </p>
              </div>

              <div class="col-xs-4 p-xs-x-md">
                <h2 class="text-base text-muted">View &amp; Edit this Kit</h2>
                <hr class="m-xs-y-sm">

                <p>
                  This demo page look out of date or is it missing something? You can edit assets, names, and settings on Fort Awesome.
                </p>

                <a class="btn btn-primary-outline block m-xs-b-sm" href="https://fortawesome.com/kits/ed31cded">View &amp; Edit on Fort Awesome</a>
                <p class="m-xs-b-0 text-muted text-sm text-xs-center">
                  Heads up! You'll need to the kit owner to view.
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>

      <footer class="footer-app m-xs-b-xl">
        <div class="container">
          <div class="row">
            <div class="col-xs-6">
              <p class="text-muted m-xs-b-0">
                This is a demonstration of a kit made using <a  target="_blank" href="https://fortawesome.com">Fort Awesome</a>, the place to pick from the best icon sets and typefaces and to manage and use them easily as part of your web projects.
              </p>
            </div>
            <div class="col-xs-6 text-xs-right">
              <a class="m-xs-r-md inline-block" target="_blank" href="https://fortawesome.com">Fort Awesome</a>
              <a class="m-xs-r-md inline-block" target="_blank" href="https://fortawesome.com/help">Help</a>
              <a class="inline-block" target="_blank" href="https://articles.fortawesome.com/tagged/fort-awesome">Articles &amp; How-To's</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>