Exercise Tile - Canvas Design System

When to Use

Use when: A recipe names its exercises. ws_exercise_formula draws them in the order they run; a single ws_exercise_tile is one exercise at a glance. The minutes are the step's, so they change with the recipe's length.

Don't use when: Browsing exercises, where a Listing Card carries the title, duration and category; or inside the Planner, which uses its own planner card. A running order with start times is an Agenda.

Variants

The formula

Three tiles in order, joined by plus signs. Every tile keeps the same width; below 600px they stack, with each plus sign between them.

<?= ws_exercise_formula([
    ['symbol' => 'Bw', 'name' => 'Brainwriting', 'minutes' => 20, 'href' => '/library/exercises/detail/?code=brwritg'],
    ['symbol' => 'Af', 'name' => 'Affinity Diagramming', 'minutes' => 20, 'href' => '/library/exercises/detail/?code=affinity'],
    ['symbol' => 'Dv', 'name' => 'Dot Voting', 'minutes' => 25, 'href' => '/library/exercises/detail/?code=dotvote'],
], ['label' => 'The three exercises, in order']) ?>

One tile

With href the whole tile is a link; without minutes the corner stays empty.

Point of View Statement

Stinky Fish

<?= ws_exercise_tile(['symbol' => 'Pv', 'name' => 'Point of View Statement', 'minutes' => 15, 'href' => '/library/exercises/detail/?code=povstatement']) ?>
<?= ws_exercise_tile(['symbol' => 'Sf', 'name' => 'Stinky Fish']) ?>

Options

ws_exercise_tile

Option	Type	Default	Purpose
`symbol`	string	required	Two letters, capital then lowercase, one per exercise everywhere it appears
`name`	string	required	The exercise's display name. The capitals are CSS.
`minutes`	int	`null`	The step's minutes; omitted, the corner stays empty
`href`	string	`''`	Makes the whole tile a link
`id`	string	`''`	Element ID
`class`	string	`''`	Additional CSS classes
`attrs`	array	`[]`	Extra HTML attributes

ws_exercise_formula

Option	Type	Default	Purpose
`$tiles`	array	required	Each tile's `ws_exercise_tile` options, in order
`label`	string	`''`	The list's accessible name, when no heading right above names it
`id`	string	`''`	Element ID
`class`	string	`''`	Additional CSS classes
`attrs`	array	`[]`	Extra HTML attributes

Accessibility

Concern	Behavior
Reading order	The name comes first in the markup and the minutes follow in words, so a tile reads "Brainwriting, 20 minutes". The grid areas move them visually only.
Symbol	`aria-hidden`: it is a visual shorthand, and "B w" read aloud means nothing.
Capitals	`text-transform`, not typed capitals, so a screen reader never spells the name letter by letter.
Formula	An ordered list, announced with its count. The plus signs are `aria-hidden`: the order already says what follows what.
Links	With `href` the tile is one link named by its text, with a visible focus ring.

Tokens

Token	Used for
`--bg-surface`, `--card-border`	The tile's white fill and its 2px border
`--brand-ink`	The symbol and the plus signs
`--font-heading`, `--text-display-lg`	The symbol: Fraunces
`--font-body`, `--text-small`, `--text-meta`	The minutes and the name: Inter
`--brand`	A linked tile's border on hover
`--focus-ring`	A linked tile's focus ring

CSS Classes

Class	Purpose
`.ws-exercise-tile`	The square
`.ws-exercise-tile--link`	A tile with `href`
`.ws-exercise-tile__symbol` / `__minutes` / `__name`	Top left, top right, bottom right
`.ws-exercise-formula`	The ordered list
`.ws-exercise-formula__item`	One tile's slot, all the same width
`.ws-exercise-formula__plus`	The plus sign in the gap before a tile

Files

File	Purpose
`includes/components/helpers.php`	`ws_exercise_tile()` and `ws_exercise_formula()`
`includes/components/exercise-tile.php`	Template: one tile
`includes/components/exercise-formula.php`	Template: the list of tiles and plus signs
`includes/components/components.css`	Styles (`.ws-exercise-tile` and `.ws-exercise-formula` rules)