Feature title
A sentence or two describing the feature goes right here.
Feature Card
Sourcecomponents/cards/FeatureCard.astro
Markers
A bordered surface card with a marker on top, a title (serif-italic accent supported), and body copy. The marker is a number, a violet dot, or an icon.
Feature title
A sentence or two describing the feature goes right here.
Feature title
A sentence or two describing the feature goes right here.
On dark
The same card inverted for dark sections — surface="dark".
surface="dark" 01 02 03
Feature title
A short supporting line.
Feature title
A short supporting line.
Feature title
A short supporting line.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
marker | 'number' | 'dot' | 'icon' | 'none' | 'dot' | The marker at the top of the card. |
number | string | '01' | Shown when marker="number". |
title | string | — | Title (supports <em> for a serif-italic accent). |
body | string | — | Supporting copy. |
surface | 'light' | 'dark' | 'light' | Cream card, or inverted to ink. |
Usage
Wrap the accent word in <em> for the serif italic. Slot an icon when marker="icon".
<FeatureCard marker="number" number="01"
title="Feature <em>title</em>"
body="A sentence or two describing the feature." />
<FeatureCard marker="icon" surface="dark" title="Feature title">
<svg slot="icon">…</svg>
</FeatureCard>Rules
Do
Use one marker style consistently across a row.
Keep the serif accent to one word in the title.