SemanSemantic-UItic-UI/server/documents/views/statistic.html.eco

---
layout      : 'default'
css         : 'stat'

element     : 'statistic'
elementType : 'view'

title       : 'Statistic'
description : 'A statistic emphasizes the current value of an attribute'
type        : 'UI View'

themes      : ['Default']
---

<%- @partial('header') %>

<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/statistic.less" />
<script src="/javascript/card.js"></script>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Content</a>
      <a class="card">Variations</a>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Statistic</h4>
    <p>A statistic can display a value with a label above or below it.</p>
    <div class="ui statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui statistic">
      <div class="label">
        Famous Dogs
      </div>
      <div class="value">
        414
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Statistic</h4>
    <p>A group of statistics</p>
    <div class="ui statistics">
      <div class="statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Breeds of Dog
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          31
        </div>
        <div class="label">
          Famous Dogs in Films
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          US Presidents Owned Dogs
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Content</h2>

  <div class="example">
    <h4 class="ui header">Value</h4>
    <p>A statistic can contain a numeric, icon, image, or text value</p>
    <div class="ui statistics">
      <div class="statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Cities Named After Dogs
        </div>
      </div>
      <div class="statistic">
        <div class="text value">
          Two Million
        </div>
        <div class="label">
          Homeless Dogs in USA
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          <i class="plane icon"></i> 5
        </div>
        <div class="label">
          Flights Piloted By Dogs
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          <img src="/images/demo/transparent-dog.png">
          11
        </div>
        <div class="label">
          Puppies Made This Page
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Label</h4>
    <p>A statistic can contain a label to help provide context for the presented value</p>
    <div class="ui statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
  </div>


  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Horizontal Statistic</h4>
    <p>A statistic can present its measurement horizontally</p>
    <div class="ui horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui horizontal statistics">
      <div class="statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Breeds of Dog
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          31
        </div>
        <div class="label">
          Famous Dogs in Films
        </div>
      </div>
      <div class="statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          US Presidents Owned Dogs
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Colored</h4>
    <p>A statistic can be formatted to be different colors</p>
    <div class="ui statistics">
      <div class="yellow statistic">
        <div class="value">
          27
        </div>
        <div class="label">
          Yellow Labradors
        </div>
      </div>
      <div class="green statistic">
        <div class="value">
          8
        </div>
        <div class="label">
          Green Poodles
        </div>
      </div>
      <div class="blue statistic">
        <div class="value">
          28
        </div>
        <div class="label">
          Blue Shiba-Inus
        </div>
      </div>
      <div class="orange statistic">
        <div class="value">
          14
        </div>
        <div class="label">
          Orange Chihuahuas
        </div>
      </div>
      <div class="purple statistic">
        <div class="value">
          82
        </div>
        <div class="label">
          Purple Labradoodles
        </div>
      </div>
      <div class="pink statistic">
        <div class="value">
          1
        </div>
        <div class="label">
          Pink Labradors
        </div>
      </div>
      <div class="red statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Red Mastifs
        </div>
      </div>
      <div class="teal statistic">
        <div class="value">
          15
        </div>
        <div class="label">
          Teal Cockerspaniels
        </div>
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A statistic can be formatted to fit on a dark background</p>
    <div class="ui inverted segment">
      <div class="ui inverted statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Breeds of Dog
        </div>
      </div>
      <div class="ui inverted yellow statistic">
        <div class="value">
          27
        </div>
        <div class="label">
          Yellow Labradors
        </div>
      </div>
      <div class="ui inverted green statistic">
        <div class="value">
          8
        </div>
        <div class="label">
          Green Poodles
        </div>
      </div>
      <div class="ui inverted blue statistic">
        <div class="value">
          28
        </div>
        <div class="label">
          Blue Shiba-Inus
        </div>
      </div>
      <div class="ui inverted orange statistic">
        <div class="value">
          14
        </div>
        <div class="label">
          Orange Chihuahuas
        </div>
      </div>
      <div class="ui inverted purple statistic">
        <div class="value">
          82
        </div>
        <div class="label">
          Purple Labradoodles
        </div>
      </div>
      <div class="ui inverted pink statistic">
        <div class="value">
          1
        </div>
        <div class="label">
          Pink Labradors
        </div>
      </div>
      <div class="ui inverted red statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Red Mastifs
        </div>
      </div>
      <div class="ui inverted teal statistic">
        <div class="value">
          15
        </div>
        <div class="label">
          Teal Cockerspaniels
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Floated</h4>
    <p>An statistic can sit to the left or right of other content</p>

    <div class="ui segment">
      <div class="ui right floated statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Breeds of Dog
        </div>
      </div>
      <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>

      <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

      <div class="ui left floated statistic">
        <div class="value">
          22
        </div>
        <div class="label">
          Breeds of Dog
        </div>
      </div>
      <p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>

      <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>A statistic can vary in size</p>
    <div class="ui mini statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui tiny statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui small statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui large statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui huge statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui mini horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui tiny horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui small horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui large horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
    <div class="ui huge horizontal statistic">
      <div class="value">
        22
      </div>
      <div class="label">
        Breeds of Dog
      </div>
    </div>
  </div>

</div>