Listing Card - Canvas Design System

When to Use

Use Listing Card when: Displaying content library items (workshops, exercises, icebreakers) in a grid or list. Each card links to a detail page.

Don't use when: Displaying generic content — use Card instead. For feature marketing grids, use Feature Card.

Live Demo

Cards rendered with sample data. In production these are populated from the database via prepareCardData().

Design Sprint

5 days 3

A 5-day process for answering critical business questions through design, prototyping, and testing ideas with customers.

Strategy

Crazy Eights

8 min

A fast sketching exercise that challenges people to sketch 8 distinct ideas in 8 minutes.

Ideation

Two Truths and a Lie

15 min 7

A classic icebreaker where each person shares two true statements and one false one. The group guesses the lie.

Team building

Usage

The helper function wraps the partial and accepts a prepared card data array.

<?php
require_once 'includes/listing-helpers.php';

// Option 1: Using prepareCardData() on listing pages
$card = prepareCardData($item, $pageData);
echo ws_listing_card($card);

// Option 2: Direct include (existing pattern, still works)
$card = prepareCardData($item, $pageData);
include 'includes/partials/listing-card.php';
?>

Card Data Structure

The $card array from prepareCardData() contains:

Key	Type	Description
`id`	string	Item ID
`title`	string	Display title
`category`	string	Category name
`category_icon`	string	Material icon name
`category_color`	string	Hex color for category
`duration`	string	Formatted duration (e.g., "45 min")
`overview`	string	Description text (truncated in card)
`detail_url`	string	Link to detail page
`type`	string	Content type (workshop, exercise, icebreaker)
`views`	int	View count
`in_collection`	bool	Whether item is in user's collection
`created_at`	string	ISO date string for sorting
`comment_count`	int	Number of comments (shown as badge in meta when > 0)

Anatomy

The listing card contains four parts:

Header: Category icon + title + duration badge + comment count (if > 0)

Description: Truncated overview text (150 chars)

Footer: Category badge + action buttons (notes, favorite, share). Notes button only visible when item has user notes (red note_add icon via .has-note class added by JS).

Files

File	Purpose
`includes/components/helpers.php`	`ws_listing_card()` helper function
`includes/partials/listing-card.php`	Card template partial
`includes/listing-helpers.php`	`prepareCardData()` and category utilities
`css/listing-redesign.css`	Card styles