Cards
Five dashboard card styles, each identified by a 4px accent border on the bottom edge. The accent color communicates semantic meaning at a glance — neutral, primary, danger, success, or brand.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-secondary | global_colors.secondary_color | Card title text |
--color-body | global_colors.body_color | Card body text, file-type icons, action button text |
--color-surface | global_colors.menu_background | Card background (unpublished status button) |
--color-page-bg | global_colors.page_color | Card shadow tint |
--color-table | global_colors.table_color | Offers badge background |
--color-primary | global_colors.primary_color | Primary and brand accent border; card links and action text |
--color-error | global_colors.error_color | Danger accent border; error/expiry date text |
--color-success | global_colors.success_color | Success accent border; published status indicator text |
--color-border | global_colors.border_color | Neutral accent border; divider and icon colors |
Type 1 — Journey card (neutral accent)
Shows a journey with a status dot and publish state button, user/task counts, date, and publisher attribution. The neutral bottom border (--color-border) indicates an unpublished or inactive state.
Canada & US Journey
120 Users | 15 Tasks
January 1, 2020 - October 15, 2020
Unpublished by John Smith
Type 2 — Content folder card (primary accent)
A folder or content container card showing a folder icon, title, and an inline action row with Edit, Clone, and Remove links. The primary brand accent border (--color-primary) marks this as an active, usable item.
Type 3 — File / PDF task card (archived)
A document or PDF task card displaying a path, a task title, and View, Clone, and Remove actions. The danger accent border (--color-error) signals it's archived card.
Type 4 — Video / media task card (success accent)
A video task card with a film icon, a published status indicator in success green, a selection checkbox, and View, Clone, and Unpublish actions. The success accent border (--color-success) signals an active published state.
Type 5 — Journey type card
Tiled carad displaying two key metrics — journey count and user count — with icons. Uses stacked decorations for visual depth. The primary brand accent border reflects this is an active entity.