Statistic

Basic

234

Score

.c-stat
  .c-stat__value 234
  .c-stat__label Score

<div class="c-stat">
  <div class="c-stat__value">
    234
  </div>
  <div class="c-stat__label">
    Score
  </div>
</div>

Advaned

You can show a unit with span.c-stat__unit and the raise and fall information with .c-stat__updown--up or .c-stat__updown--down.

0.95%

CVR

79.45%1.6

CVR

.c-stat
  .c-stat__value
    | 0.95
    span.c-stat__unit %
    span.c-stat__updown--up
  .c-stat__label CVR

.c-stat
  .c-stat__value
    | 79.45
    span.c-stat__unit %
    span.c-stat__updown--down
      | 1.6
  .c-stat__label CVR

<div class="c-stat">
  <div class="c-stat__value">
    0.95<span class="c-stat__unit">%</span><span class="c-stat__updown--up"></span>
  </div>
  <div class="c-stat__label">
    CVR
  </div>
</div>
<div class="c-stat">
  <div class="c-stat__value">
    79.45<span class="c-stat__unit">%</span><span class="c-stat__updown--down">1.6</span>
  </div>
  <div class="c-stat__label">
    CVR
  </div>
</div>

Horizontal

A statistic can present its measurement horizontally.

Score

124

CVR

18.42%

Conversions

Visitors

407

Goal

Increase the Number of Clicks

URL

https://bio.danone.co.jp/14days/sp/

Reward

$1,400

Deadline

Oct 10, 2014

Status

Interval 2

.c-stats--horizontal.u-mb20
  .c-stat
    .c-stat__label Score
    .c-stat__value 124
  .c-stat
    .c-stat__label CVR
    .c-stat__value 18.42%
  .c-stat
    .c-stat__label Conversions
    .c-stat__value 75
  .c-stat
    .c-stat__label Visitors
    .c-stat__value 407

.c-stats--horizontal
  .c-stat
    .c-stat__label  Goal
    .c-stat__value Increase the Number of Clicks
  .c-stat
    .c-stat__label  URL
    .c-stat__value: a href="https://bio.danone.co.jp/14days/sp/" https://bio.danone.co.jp/14days/sp/
  .c-stat
    .c-stat__label  Reward
    .c-stat__value $1,400
  .c-stat
    .c-stat__label Deadline
    .c-stat__value Oct 10, 2014
  .c-stat
    .c-stat__label Status
    .c-stat__value Interval 2

<div class="c-stats--horizontal u-mb20">
  <div class="c-stat">
    <div class="c-stat__label">
      Score
    </div>
    <div class="c-stat__value">
      124
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      CVR
    </div>
    <div class="c-stat__value">
      18.42%
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      Conversions
    </div>
    <div class="c-stat__value">
      75
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      Visitors
    </div>
    <div class="c-stat__value">
      407
    </div>
  </div>
</div>
<div class="c-stats--horizontal">
  <div class="c-stat">
    <div class="c-stat__label">
      Goal
    </div>
    <div class="c-stat__value">
      Increase the Number of Clicks
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      URL
    </div>
    <div class="c-stat__value">
      <a href="https://bio.danone.co.jp/14days/sp/">https://bio.danone.co.jp/14days/sp/</a>
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      Reward
    </div>
    <div class="c-stat__value">
      $1,400
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      Deadline
    </div>
    <div class="c-stat__value">
      Oct 10, 2014
    </div>
  </div>
  <div class="c-stat">
    <div class="c-stat__label">
      Status
    </div>
    <div class="c-stat__value">
      Interval 2
    </div>
  </div>
</div>