• Patterns
  • Panels

Nav panel with stats

Usage notes

Use to display key stats in an easy-to-overview manner. Makes heavy use of the stat classes

  
<article class="nav-panel nav-panel--stats sectioned">
  <header class="nav-panel__header nav-panel__roomy">
    <h2 class="flush">Gross Domestic Product (GDP)</h2>
  </header>

  <div class="nav-panel__roomy">
    <ul class="list--neutral">
      <li class="nav-panel__item">
        <dl>
          <dt class="nav-panel__title">
            <a href="#">
              Gross Domestic Product
            </a>
            <span tabindex="0" title="Lorem ipsum dolor sit amet" class="tooltip icon-info-circled icon--warm icon--inline icon--left-margin"></span>
          </dt>
          <dd class="nav-panel__value">
            <div class="stat stat--small">
              <div class="stat__figure">
                390383
                <span class="stat__figure__unit">m</span>
              </div>
              <div class="stat__description">
                1st Quarter 2014
              </div>
            </div>
          </dd>
        </dl>
      </li>

      <li class="nav-panel__item">
        <dl>
          <dt class="nav-panel__title">
            <a href="#">
              GDP Quarter on Quarter growth
            </a>
            <span tabindex="0" title="Lorem ipsum dolor sit amet" class="tooltip icon-info-circled icon--warm icon--inline icon--left-margin"></span>
          </dt>
          <dd class="nav-panel__value">
            <div class="stat stat--small">
              <div class="stat__figure">
                0.8
                <span class="stat__figure__unit">%</span>
              </div>
              <div class="stat__description">
                1st Quarter 2014
              </div>
            </div>
          </dd>
        </dl>
      </li>

      <li class="nav-panel__item">
        <dl>
          <dt class="nav-panel__title">
            <a href="#">
              GDP Change on same Quarter a year ago
            </a>
            <span tabindex="0" title="Lorem ipsum dolor sit amet" class="tooltip icon-info-circled icon--warm icon--inline icon--left-margin"></span>
          </dt>
          <dd class="nav-panel__value">
            <div class="stat stat--small">
              <div class="stat__figure">
                0.3
                <span class="stat__figure__unit">%</span>
              </div>
              <div class="stat__description">
                1st Quarter 2014
              </div>
            </div>
          </dd>
        </dl>
      </li>

      <li class="nav-panel__item">
        <dl>
          <dt class="nav-panel__title">
            <a href="#">
              Production Index
            </a>
            <span tabindex="0" title="Lorem ipsum dolor sit amet" class="tooltip icon-info-circled icon--warm icon--inline icon--left-margin"></span>
            <div class="micro description">2005 = 100. Not seasonally adjusted</div>
          </dt>
          <dd class="nav-panel__value">
            <div class="stat stat--small">
              <div class="stat__figure">
                0.8
                <span class="stat__figure__unit">%</span>
              </div>
              <div class="stat__description">
                1st Quarter 2014
              </div>
            </div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <footer class="nav-panel__footer">
    <div class="nav-panel__action">
      <a class="nav-panel__roomy" href="#">View all Gross Domestic Product</a>
    </div>
  </footer>
</article>