Listing Card

When to Use

Variants

There's one card. What varies is the record it's given — the category icon and colour, the duration, and whether the item is already in a collection or has comments. All of it comes from 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

Pre-mortem

45 min

Imagine the project has already failed, then work back to the risks people privately worry about but rarely say out loud.

Strategy

States

Real-World Usage

The exercises listing. prepareCardData() does the shaping — category lookup, duration formatting, truncation — so pages don't build the array by hand.

<?php
require_once 'includes/listing-helpers.php';
?>
<div class="listing-grid">
    <?php foreach ($exercises as $item): ?>
        <?= ws_listing_card(prepareCardData($item, $pageData)) ?>
    <?php endforeach; ?>
</div>

<?php if (!$exercises): ?>
    <?= ws_empty_state('Nothing matches those filters', [
        'icon' => 'filter_alt_off', 'action' => 'Clear filters', 'actionHref' => '?',
    ]) ?>
<?php endif; ?>

Including the partial directly still works and produces the same markup — the helper just wraps it:

<?php
$card = prepareCardData($item, $pageData);
include 'includes/partials/listing-card.php';
?>

Options

ws_listing_card() takes one positional array — the output of prepareCardData(). These are the keys it reads.

Accessibility

Tokens

Listing Card's styles live in css/listing-redesign.css, not components.css — a page rendering these cards must load that stylesheet too. It draws on the shared surface, border, radius, ink, and type scales; the only per-record colour is category_color, applied inline from the database rather than from a token.

CSS Classes

These use the .listing-card- prefix, not .ws- — the component predates the library's naming convention.

Files