Canvas Design System
Main Site Tokens

Stat

Single metric displays and grouped stat rows. Use for hero numbers, dashboard KPIs, and marketing callouts.

Single Stat

50+ Workshops
120+ Exercises
1,000+ Facilitators
<?= ws_stat('50+', 'Workshops') ?>
<?= ws_stat('120+', 'Exercises', ['color' => '#E54D4D']) ?>
<?= ws_stat('1,000+', 'Facilitators', ['icon' => 'groups']) ?>

Stats Group

Use ws_stats() to render a row of stats with dividers.

50+ Workshops
120+ Exercises
80+ Icebreakers
1,000+ Facilitators
<?= ws_stats([
    ['value' => '50+', 'label' => 'Workshops'],
    ['value' => '120+', 'label' => 'Exercises'],
    ['value' => '80+', 'label' => 'Icebreakers'],
    ['value' => '1,000+', 'label' => 'Facilitators'],
]) ?>

With Color

50+ Workshops
120+ Exercises
80+ Icebreakers

With Icons

50+ Workshops
120+ Exercises
80+ Icebreakers

API Reference

ws_stat()

ParamTypeDefaultDescription
$valuestringrequiredDisplay value (e.g. "50+")
$labelstringrequiredLabel text
colorstringnullValue color (hex or CSS var)
iconstringnullMaterial icon name
idstringnullElement ID
classstring''Additional CSS classes

ws_stats()

ParamTypeDefaultDescription
$statsarrayrequiredArray of stat items (value, label, color, icon)
idstringnullContainer ID
classstring''Additional CSS classes