Statistic

A statistic emphasizes the current value of an attribute.

The Semantic UI definitions/views/statistic.less component is not enabled by default. It can be enabled in the WordPress admin dashboard under Chap Theme -> Chap Compiler.
[statistics] shortcode arguments
classes:
Color -
[red|green|blue|...]
Orientation -
[horizontal]
Count -
[one|two|three|...]
Responsive -
[stackable]
[statistic] shortcode arguments
classes:
Color -
[red|green|blue|...]
Size -
[mini|tiny|small|large|huge]
Orientation -
[horizontal]
Other -
[inverted]
label:
Name of the attribute.
pos:
Label position [before|after] (default: after).
icon:
Name of the icon to use.
image:
URL of the image to use.
Statistic
5,500
Downloads
<statistic label="Downloads">5,500</statistic>
Label positioning
Views
37,238
<statistic label="Views" pos="before">37,238</statistic>
Statistic group
49
Faves
78,435
Views
3,858
Members
<statistics>
  <statistic label="Faves">49</statistic>
  <statistic label="Views">78,435</statistic>
  <statistic label="Members">3,858</statistic>
</statistics>
Content
39
Saves
Three
thousand
Signups
5
Flights
Team members23
Team members
<statistics>
  <statistic label="Saves">39</statistic>
  <statistic text label="Signups">Three{lt}br/{gt}thousand</statistic>
  <statistic label="Flights" icon="plane">5</statistic>
  <statistic label="Team members" image="/avatars/1s.png">23</statistic>
</statistics>
Notes
A statistic can contain a numeric, icon, image, or text value.
Horizontal statistic
5,693
Downloads
<statistic horizontal label="Downloads">5,693</statistic>
Horizontal statistics
49
Faves
78,435
Views
3,858
Members
<statistics horizontal>
  <statistic label="Faves">49</statistic>
  <statistic label="Views">78,435</statistic>
  <statistic label="Members">3,858</statistic>
</statistics>
Colored statistics
4
Red
8
Orange
15
Yellow
16
Olive
23
Green
42
Teal
53
Blue
68
Violet
89
Purple
131
Grey
<statistics>
  <statistic red label="Red">4</statistic>
  <statistic orange label="Orange">8</statistic>
  <statistic yellow label="Yellow">15</statistic>
  <statistic olive label="Olive">16</statistic>
  <statistic green label="Green">23</statistic>
  <statistic teal label="Teal">42</statistic>
  <statistic blue label="Blue">53</statistic>
  <statistic violet label="Violet">68</statistic>
  <statistic purple label="Purple">89</statistic>
  <statistic grey label="Grey">131</statistic>
</statistics>
Inverted statistics
4
Red
8
Orange
15
Yellow
16
Olive
23
Green
42
Teal
53
Blue
68
Violet
89
Purple
131
Grey
<segment inverted>
  <statistics>
    <statistic inverted red label="Red">4</statistic>
    <statistic inverted orange label="Orange">8</statistic>
    <statistic inverted yellow label="Yellow">15</statistic>
    <statistic inverted olive label="Olive">16</statistic>
    <statistic inverted green label="Green">23</statistic>
    <statistic inverted teal label="Teal">42</statistic>
    <statistic inverted blue label="Blue">53</statistic>
    <statistic inverted violet label="Violet">68</statistic>
    <statistic inverted purple label="Purple">89</statistic>
    <statistic inverted grey label="Grey">131</statistic>
  </statistics>
</segment>
Evenly divided statistics
39
Saves
525
Signups
5
Flights
Members23
Members
<statistics four>
  <statistic label="Saves">39</statistic>
  <statistic label="Signups">525</statistic>
  <statistic label="Flights" icon="plane">5</statistic>
  <statistic label="Members" image="/avatars/1s.png">23</statistic>
</statistics>
Floated statistic
345
Shares

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.

Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea.

Three
thousand
Signups

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.

<segment clearing>
  <statistic left floated label="Shares">345</statistic>
  <lorem 3 short>
  <statistic right floated text label="Signups">Three{lt}br/{gt}thousand</statistic>
  <lorem 2 short>
</segment>
Statistic size
2,304
Mini
2,304
Tiny
2,304
Small
2,304
Medium
2,304
Large
2,304
Huge
<statistic mini label="Mini">2,304</statistic>
<statistic tiny label="Tiny">2,304</statistic>
<statistic small label="Small">2,304</statistic>
<statistic label="Medium">2,304</statistic>
<statistic large label="Large">2,304</statistic>
<statistic huge label="Huge">2,304</statistic>
Responsive statistics with alternative content for AMP
Three
thousand
Signups
Team members11
Team members
14
Releases
65,500
Downloads
<statistics four stackable>
  <statistic text label="Signups" amp-invisible>Three{lt}br/{gt}thousand</statistic>
  <statistic label="Signups" amp-only>3k</statistic>
  <statistic label="Team members" image="//placehold.it/512x512.png">11</statistic>
  <statistic label="Releases">14</statistic>
  <statistic label="Downloads" amp-invisible>65,500</statistic>
  <statistic label="Downloads" amp-only>65k</statistic>
</statistics>
Notes
Stackable statistics will stack on top of each other on mobile.

Leave a comment

Your email address will not be published. Required fields are marked *