Card - Canvas Design System

When to Use

Use Card when: Displaying content items (exercises, workshops, icebreakers), grouping form fields, showing stats or summaries, or wrapping any standalone block of related information.

Don't use when: Content is purely inline text — use a paragraph. For full-width banners, use Alert. For navigation lists, use Tabs.

Variants

Content Card

Standard 20px padding for content display.

Feature Card

Larger 24px padding for featured content.

Compact Card

Tighter 16px padding for dense UI.

<?php ws_card_start(['variant' => 'content']); ?>
    Content here...
<?php ws_card_end(); ?>

<?php ws_card_start(['variant' => 'feature']); ?>
    Featured content...
<?php ws_card_end(); ?>

<?php ws_card_start(['variant' => 'compact']); ?>
    Compact content...
<?php ws_card_end(); ?>

Modifiers

Hoverable

Hover to see the lift effect and shadow.

Elevated

Pre-elevated with box shadow, no border.

Bordered

Thicker 2px border for emphasis.

<?php ws_card_start(['variant' => 'content', 'hoverable' => true]); ?>
    Hoverable card...
<?php ws_card_end(); ?>

<?php ws_card_start(['variant' => 'content', 'elevated' => true]); ?>
    Elevated card...
<?php ws_card_end(); ?>

Exercise Cards

Real-world usage from the exercises listing page. Cards combine icon, title, duration badge, description, category badge, and action buttons.

Crazy 8s Sketching

30 min

Rapid sketching exercise where participants fold paper into 8 panels and sketch one idea per panel in one minute each.

Ideation

Stakeholder Mapping

45 min

Identify and map key stakeholders by influence and interest to align engagement strategies throughout the project.

Research

Affinity Mapping

60 min

Organize research findings and ideas into meaningful clusters to reveal themes and patterns across qualitative data.

Analysis

Workshop Cards

Workshop listing cards follow the same pattern but typically feature longer durations and strategy-focused categories.

Design Sprint

5 days

A structured five-day process for solving critical business questions through design, prototyping, and user testing.

Strategy

Customer Journey Mapping

3 hours

Map the end-to-end customer experience to identify pain points, opportunities, and moments that matter most.

Research

<?php ws_card_start(['variant' => 'content', 'hoverable' => true]); ?>
    <div class="listing-card-header">
        <div class="listing-card-icon" style="background: #E54D4D1A; color: #E54D4D;">
            <?= icon('rocket_launch', 'icon') ?>
        </div>
        <div>
            <h3 class="listing-card-title">Design Sprint</h3>
            <div class="listing-card-meta">
                <?= ws_duration('5 days') ?>
            </div>
        </div>
    </div>
    <p class="listing-card-description">Description text...</p>
    <div class="listing-card-footer">
        <?= ws_category('Strategy', '#E54D4D') ?>
        <div class="listing-card-actions">
            <button class="listing-card-action"><?= icon('favorite_border', 'icon') ?></button>
            <button class="listing-card-action"><?= icon('share', 'icon') ?></button>
        </div>
    </div>
<?php ws_card_end(); ?>

Flush with Header/Body/Footer

The flush variant removes padding from the card itself. Use the underlying template with header, body, and footer slots for structured layouts.

Your design sprint covered 5 exercises across 3 hours with 8 participants. Overall engagement was high.

$card = [
    'variant' => 'flush',
    'header'  => '<strong>Session Summary</strong>',
    'slot'    => '<p>Body content...</p>',
    'footer'  => ws_button('View Report', ['variant' => 'primary', 'size' => 'sm']),
];
include 'includes/components/card.php';

Parameters

Options for ws_card_start() / ws_card_end():

Parameter	Type	Default	Description
`variant`	string	`content`	`content` \| `feature` \| `compact` \| `flush`
`hoverable`	bool	`false`	Lift effect on hover (translateY + shadow)
`elevated`	bool	`false`	Pre-elevated with box shadow, removes border
`bordered`	bool	`false`	Thicker 2px border
`href`	string	`null`	Renders as `<a>` instead of `<div>`
`tag`	string	`div`	Override wrapper element tag
`id`	string	`null`	Element ID
`class`	string	`''`	Additional CSS classes
`attrs`	array	`[]`	Extra HTML attributes

The template-based API (include card.php) also accepts header, slot, footer, and data parameters.

Anatomy

.ws-card — Outer wrapper (<div> or <a>)

.ws-card__header — Optional top section (flush variant)

.ws-card__body — Main content area (flush variant)

.ws-card__footer — Optional bottom section (flush variant)

For listing cards, the inner structure uses .listing-card-header, .listing-card-icon, .listing-card-title, .listing-card-meta, .listing-card-description, and .listing-card-footer.

CSS Classes

Class	Purpose
`.ws-card`	Base card styles (background, border, radius)
`.ws-card--content`	Standard padding (20px)
`.ws-card--feature`	Larger padding (24px)
`.ws-card--compact`	Tighter padding (16px)
`.ws-card--flush`	No padding (use section slots)
`.ws-card--hoverable`	Cursor pointer + lift on hover
`.ws-card--elevated`	Pre-applied box shadow
`.ws-card--bordered`	2px border
`.listing-card`	Full listing card pattern (in listing-redesign.css)
`.listing-card-header`	Icon + title + meta row
`.listing-card-footer`	Category badge + action buttons

Files

File	Purpose
`includes/components/helpers.php`	`ws_card_start()` / `ws_card_end()` / `ws_card()` helpers
`includes/components/card.php`	Template-based card with header/body/footer slots
`includes/components/components.css`	Card CSS (`.ws-card` rules)
`includes/partials/listing-card.php`	Listing card partial used on exercises/workshops pages
`css/listing-redesign.css`	Listing card styles (`.listing-card` rules)