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',
]) ?>

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