Skip to content

1. Default — card A

Baseline card. Title and this description inherit the card variant 1 text color; the icon tile uses the variant's icon colors and corner radius. No module overrides set.

Default — card B

Gap between cards comes from the theme spacing scale (Medium preset = 32). Card corner radius and border come from the card variant — no per-instance radius/border/shadow fields.

Default — card C

Shadow uses the theme shadow token and grows on hover. Title typography follows the theme heading style (h3) — no per-instance size/weight fields.

2. Dark section — variant 1 card

Light card on a dark section. Title and this description must keep the card variant 1 text color (legible), NOT switch to the dark-section text color.

Dark section — checks

Icon tile uses the card variant icon colors. Button keeps the theme button text colors (not the card link color).

2b. Dark card (variant 4) — text stays legible

Card variant 4 on a dark section. Title and description inherit the variant 4 text color — light on dark, no per-element color fields needed.

Dark card — checks

Divider-free layout; the icon tile follows the variant 4 icon colors and corner radius tokens.

3. Text color → CUSTOM (#B30000)

This description should be dark red. The title above stays the card variant text color — the override targets body text only.

Override — checks

Same override applies to every card in the module. This is the single surviving card-interior text override.

4. Animation — card one

Scroll into view: this card reveals first, sliding up with the theme duration and easing.

Animation — card two

This card reveals second (theme stagger delay between cards).

Animation — card three

This card reveals last. Without JavaScript the cards simply stay visible; reduced motion is respected.