Session Shape
A short session at a glance: an energy line over a time bar, on one horizontal scale. Each block is as wide as its minutes; the line over it is how lively that part runs.
When to Use
Use when:
A session should be read at a glance before its steps: a recipe page shows one above its exercise tiles. Give each part an
href to its step further down.
Don't use when:
The reader needs start times (an Agenda), a workshop is being graded with a score and metrics (an Energy Arc Card), or there is one proportion to show (a Progress bar).
Variants
A 90-minute recipe
Opening and closing are grey, exercises the soft brand fill. Below 600px the names give way to the minutes, and each block keeps its spoken name.
<?= ws_session_shape([
['name' => 'Check-in', 'minutes' => 10, 'kind' => 'frame', 'energy' => 2, 'href' => '#recipe-step-1'],
['name' => 'Reverse Brainstorming', 'minutes' => 25, 'energy' => 4, 'href' => '#recipe-step-2'],
['name' => 'TRIZ', 'minutes' => 20, 'energy' => 4, 'href' => '#recipe-step-3'],
['name' => '15% Solutions', 'minutes' => 20, 'energy' => 3, 'href' => '#recipe-step-4'],
['name' => 'Commit: who does what by when', 'minutes' => 15, 'kind' => 'frame', 'energy' => 1, 'href' => '#recipe-step-5'],
]) ?>With a control under the time bar
A control that reshapes the session sits as its own row, on the time bar's scale, with an axis word beside it. The control names itself; the axis word is hidden from assistive technology. A recipe page passes its length slider and redraws the shape when it moves.
<?= ws_session_shape($parts, [
'control' => ws_range('length', ['label' => 'Length', 'hideLabel' => true, 'min' => 60, 'max' => 90, 'step' => 30, 'value' => 90, 'valueText' => '90 minutes']),
'controlLabel' => 'Length',
]) ?>Options
| Option | Type | Default | Purpose |
|---|---|---|---|
$parts | array | required | Each part: name, minutes, kind (frame or exercise), energy (1 to 5, default 3), href |
label | string | 'Shape of the session' | The group's accessible name |
control | string | '' | Rendered HTML for a row under the time bar, on its scale: a ws_range that reshapes the session |
controlLabel | string | '' | The control row's axis word, beside it like "Time" |
id | string | '' | Element ID |
class | string | '' | Additional CSS classes |
attrs | array | [] | Extra HTML attributes |
Accessibility
| Concern | Behavior |
|---|---|
| Group | A group named by label. |
| Energy line | An image named in words: "Energy starts low at Check-in, peaks during Reverse Brainstorming and ends low at Commit". |
| Time bar | An ordered list, each block named "Check-in, 10 minutes", so the shortened names and the "10m" are never all a screen reader hears. A part with href is a link with a focus ring. |
| Colour | Opening and closing differ from exercises in fill and in the legend's words, never by colour alone. |
Tokens
| Token | Used for |
|---|---|
--brand | The energy line |
--brand-soft, --brand-ink | Exercise blocks |
--gray-100, --text-default | Opening and closing blocks |
--text-micro, --text-caption, --text-muted | The axis labels, block text and legend |
--focus-ring | A linked block's focus ring |
CSS Classes
| Class | Purpose |
|---|---|
.ws-session-shape | The group |
.ws-session-shape__energy | The line, an SVG |
.ws-session-shape__time | The time bar, an ordered list |
.ws-session-shape__block--frame / --exercise | A block's kind |
.ws-session-shape__block--m5 to --m120 | A block's width, its minutes rounded to 5 |
.ws-session-shape__legend | The key |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_session_shape() |
includes/components/session-shape.php | Template: the line, the bar and the legend |
includes/components/components.css | Styles (.ws-session-shape rules) |