Agenda - Canvas Design System

When to Use

Use when: Someone needs to read a workshop's running order rather than edit it: on a workshop or library page, in a briefing, beside an AI proposal, in a summary or report. Pass start and the times follow from each duration.

Don't use when: The agenda is being edited. Inside the Planner the activities are ws_planner_card, which drag, swap and open the inspector. For a list that is not an agenda, use a stack.

Variants

With start times

The first activity starts at start and each later time adds the duration before it. An item with its own start resets the clock; a duration written as text stops it, so no later time is invented.

09:30 Welcome and goals Activity 10 min
09:40 Two truths and a lie Icebreaker 15 min
09:55 Dot voting on the roadmap Exercise Everyone gets three dots. Silent first, then discuss the top five. 30 min
10:25 Coffee Break 15 min
10:40 Owners and first steps Exercise 20 min

<?= ws_agenda([
    ['title' => 'Welcome and goals', 'duration' => 10, 'type' => 'custom'],
    ['title' => 'Two truths and a lie', 'duration' => 15, 'type' => 'icebreaker'],
    ['title' => 'Dot voting on the roadmap', 'duration' => 30, 'type' => 'exercise',
     'description' => 'Everyone gets three dots. Silent first, then discuss the top five.'],
    ['title' => 'Coffee', 'duration' => 15, 'type' => 'break'],
    ['title' => 'Owners and first steps', 'duration' => 20, 'type' => 'exercise'],
], ['start' => '09:30', 'label' => 'Morning agenda']) ?>

Without times

With no start anywhere the time column goes, and the order and durations carry the plan.

Welcome and goals Activity 10 min
Two truths and a lie Icebreaker 15 min
Dot voting on the roadmap Exercise Everyone gets three dots. Silent first, then discuss the top five. 30 min

Over several days

Items with a day are grouped under Day labels, each list named by its label.

Day 1

09:00 Kickoff and context Activity 45 min
09:45 Lightning demos Exercise 1 hr

Day 2

09:00 Decide and storyboard Exercise 1 hr 30 min
10:30 Lunch Break 1 hr

Options

Option	Type	Default	Purpose
`$items`	array	—	Positional. The activities in order; see the item fields below
`start`	string	`null`	`'HH:MM'` the first activity starts
`label`	string	`''`	Accessible name for the list, such as `'Morning agenda'`
`id`, `class`, `attrs`	—	—	On the wrapper

Item field	Type	Purpose
`title`	string	Required. The activity's name
`duration`	int or string	Minutes as an int (shown as "15 min" or "1 hr 15 min"), or text shown as written
`type`	string	`exercise`, `icebreaker`, `break` or `custom`, written out under the title; a break is muted
`start`	string	`'HH:MM'`; resets the clock from this item on
`description`	string	One line under the title
`day`	int	Groups items under Day labels when more than one day appears

Accessibility

Concern	Behavior
Structure	An ordered list with `role="list"` kept explicitly, named by `label`, so a screen reader announces how many activities there are and reads each row as time, title, type, duration. Over several days each list is named by its Day label.
Times	Each time is a `<time datetime>` in 24-hour `HH:MM`.
Colour	The type is written out, never shown by colour alone, and breaks are muted with full-contrast text. Activity-type colours stay on the Planner's canvas (Red Unification).
Keyboard	Nothing in it is interactive, so it adds no Tab stops.

Tokens

Token	Used for
`--text-dark` / `--text-default`	Title; time, type, duration and description
`--gray-200`	The rule between rows
`--space-12`	The time column

CSS Classes

Class	Purpose
`.ws-agenda`, `.ws-agenda--no-times`	Wrapper; without a time column
`.ws-agenda__list`, `.ws-agenda__item`, `.ws-agenda__item--{type}`	The list and each row
`.ws-agenda__time`, `__title`, `__type`, `__description`, `__duration`, `__day`	Row parts and the Day label

Files

File	Purpose
`includes/components/helpers.php`	`ws_agenda()`
`includes/components/agenda.php`	Template: the clock, the rows, the day groups
`includes/components/components.css`	Styles, the `AGENDA (ws_agenda)` block