Components

Card

The grey card on white, the layout unit. --empty centres a muted message.

Live example

Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).

Clark/Lake0.2 mi · 4 lines

.ct-card

No favorites yetStar a stop to keep it here.

.ct-card--empty

Code

<div class="ct-card"><b>Clark/Lake</b><span class="ct-color-muted ct-text-sub">0.2 mi · 4 lines</span></div>
<div class="ct-card ct-card--empty"><b>No favorites yet</b>Star a stop to keep it here.</div>

Tokens

From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.

Custom property	Value	Alias
`--ct-card-background`	`var(--card)`	`{colors.card}`
`--ct-card-empty-color`	`var(--muted)`	`{colors.muted}`
`--ct-card-empty-font-size`	`var(--fs-sub)`	`{type.sub}`
`--ct-card-empty-padding-x`	`var(--space-16)`	`{space.s16}`
`--ct-card-empty-padding-y`	`var(--space-20)`	`{space.s20}`
`--ct-card-gap`	`var(--space-8)`	`{space.s8}`
`--ct-card-padding`	`var(--space-card-padding)`	`{spacing.cardPadding}`
`--ct-card-radius`	`var(--r-card)`	`{radius.card}`

Usage

Do

Use grey cards on white as the layout unit.
Use --empty for an empty state with one muted message.

Don't

Don't nest cards or add a shadow to a card; sheets and floating controls carry elevation.

Accessibility

A card is a container, not a control. If the whole card is tappable, make it a link or button with one accessible name.