Pregunta a l'IA
Hola! Pregunta'm qualsevol cosa
Using statistics

Statistics is an easy way of presenting sets of value / attribute.

When using a single statistic, setting class to fluid tells the container to use full width, and center the content.
1.9K
Registered users
@w{statistic(class=fluid,label="Registered users",value="1.9K %icon-users%")}
Statistics can be organized into a single group, specifying the number and whether to stack in devices. When grouping statistics this way you may need a container, like a basic segment, to provide margins.
22
Teams
1.9K
Registered users
180
Projects
@w{segment(class=basic)}
@w{statistics(class=three stackable)}
@w{statistic(label="Teams",value="22")}
@w{statistic(label="Registered users",value="1.9K %icon-users%")}
@w{statistic(label="Projects",value="180")}
@w{/statistics}
@w{/segment}
Grouped vs Individual
Next examples show variations on size, color and orientation. We'll be using grouped statistics to specify the variations, but can also be applied individually. Individual variations take precedence over grouped variations.
When grouped, you can also provide variations at group level, like color and size.
22
Teams
1.9K
Registered users
180
Projects
@w{segment(class=basic)}
@w{statistics(class=three blue small stackable)}
@w{statistic(label="Teams",value="22")}
@w{statistic(label="Registered users",value="1.9K %icon-users%")}
@w{statistic(label="Projects",value="180")}
@w{/statistics}
@w{/segment}
Statistics can show horizontally oriented. These type of statistics use a full row.
22
Teams
1.9K
Registered users
180
Projects
@w{segment(class=basic)}
@w{statistics(class=tiny horizontal)}
@w{statistic(label="Teams",value="22")}
@w{statistic(label="Registered users",value="1.9K %icon-users%")}
@w{statistic(label="Projects",value="180")}
@w{/statistics}
@w{/segment}