Canvas Design System
Main Site Tokens

Level Up Grid

Cross-promotional grid showcasing all Workshopr apps, grouped by facilitation phase (Learn, Plan, Facilitate, Reflect). Used on landing pages to drive users across the ecosystem. Phase colors are applied automatically via the data-phase attribute.

Default

The full grid with all 12 apps. Phase colors are applied per card.

<?= ws_level_up_grid() ?>

Exclude Current App

Use current_app to omit the page's own app from the grid.

<?= ws_level_up_grid([
    'current_app' => 'intervention',
]) ?>

Grouped by Phase (with prose intros)

Set group_by_phase => true to render each facilitation phase as its own sub-section: italic phase title, half-paragraph intro in Workshopr voice, then a 3- or 4-up grid of that phase's apps. Phase prose can be overridden via phase_copy.

More from Workshopr

Level Up Your Facilitation

Learn.

Before you run the room, you read it. Steal from facilitators who've made every mistake, study the moves that worked, and stockpile exercises you can pull when the agenda goes sideways. Your reading list now is your toolkit later.

Plan.

A workshop is a sequence of decisions you make before anyone walks in: who's there, what changes by the end, where the energy spikes and dips. Block out the time, name the moves, leave room for the room. Plan tight enough to start, loose enough to follow what actually happens.

Facilitate.

The plan meets the room and the room wins. Your job is to read what's actually happening, not what you scripted, and steer with small, specific moves. Hold the timer. Surface the unsaid. Cut what's not landing.

Reflect.

The hour after the workshop is when the value either compounds or evaporates. Capture what surfaced, send the artifacts before momentum dies, and write down the one thing you'd do differently. Run enough sessions and the patterns become a craft.

<?= ws_level_up_grid([
    'current_app'    => 'academy',
    'group_by_phase' => true,
]) ?>

Custom Title & Eyebrow

<?= ws_level_up_grid([
    'current_app' => 'planner',
    'eyebrow'     => 'The full toolkit',
    'title'       => 'Everything else Workshopr can do',
]) ?>

Phase Colors

Each card uses the color of its facilitation phase. Phases are fixed in the component and map to design system tokens.

PhaseColor tokenApps
learn--phase-learn (#E54D4D)library, academy, podcasts
plan--phase-plan (#0284C7)planner, hybrid
facilitate--phase-facilitate (#7C4DFF)facilitator, sidekick, intervention, tips
reflect--phase-reflect (#10B981)dna, coach, roi

API Reference

OptionTypeDefaultDescription
current_appstringnullApp key to exclude from the grid (e.g., 'intervention')
eyebrowstring'More from Workshopr'Small label above the section title
titlestring'Level Up Your Facilitation'Section heading
appsarrayDefault catalogOverride the built-in app catalog
idstringnullSection element ID
classstring''Additional CSS classes

When to use

  • On landing pages (library, planner, intervention, dna, tips, etc.) as a footer cross-promotion
  • When you want to drive users to related Workshopr tools
  • At the end of long-form content to surface related apps

When NOT to use

  • Inside an authenticated product (users are already engaged)
  • On detail pages where it would distract from the primary CTA
  • More than once on the same page