Canvas Design System
Main Site Tokens

Choice Card

One way into a task, offered beside the others. An icon, a name, a sentence of what you get, and a foot saying what it costs you and what happens next.

When to Use

Use when: The reader has to pick a route before anything happens, and the routes differ in effort as much as in outcome. Plan's home, the planner home and the builder's empty canvas all open the same three paths this way.
Don't use when: You are listing things rather than offering routes. A saved workshop, an exercise, a collection: those are ws_listing_card. A choice card promises that clicking it starts something.

The row

Three is the working width. At most one card is featured, and it carries the badge that says why.

Recommended Generate with AI Describe the outcome you need. You get a full agenda to edit. ~30 seconds Generate Build it yourself Start from an empty canvas and pull in exercises as you go. Your pace Open the builder Check an agenda Paste one you already have and see where it will sag. ~2 minutes Run the check

Variants

Two columns

Pass columns when there are only two routes, so the pair fills the width instead of leaving a hole.

Start from raw material Notes, transcript, photos, or a board export. Add material Use a workshop you ran Everything captured on the day, already in order. Pick a workshop

Buttons, not links

Leave href off and the card renders as a real <button>. Use that when the choice opens something on the page rather than navigating.

Bare

Everything but the title and sentence is optional. Drop the time when the route has no honest estimate: an invented number is worse than none.

Write it out A blank page and the outcome you are after. Import one Bring an agenda over from somewhere else. Look around first See what other facilitators run for this.

Usage

<?= ws_choice_cards([
    [
        'icon'     => 'auto_awesome',
        'badge'    => 'Recommended',
        'featured' => true,
        'title'    => 'Generate with AI',
        'desc'     => 'Describe the outcome you need. You get a full agenda to edit.',
        'time'     => '~30 seconds',
        'cta'      => 'Generate',
        'href'     => '/app/?view=plan&step=build',
    ],
    // …
]) ?>

Geometry comes from --card-padding and --card-radius, the same tokens every other card on the platform reads, so the family moves together. check-drift.php Check 4 fails any card rule that sets padding or radius with a literal instead.

Say what the route costs. "~30 seconds" against "Your pace" is the difference the reader is actually choosing on. The titles rarely carry it.
Don't feature more than one. The featured card is the recommendation. Two recommendations is no recommendation, and the row goes back to being a menu.