'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
MediaCard and CalloutCard
Cards that lead with media or an illustration: a title, text and up to two actions, dismissible. MediaCard puts media beside the text and stacks when the card is narrow, or on top; CalloutCard suggests a next step.
import { MediaCard, CalloutCard } from '@alea/ui';
Examples
MediaCard and CalloutCard
Media beside the text (it stacks when the card is narrow) or on top; a callout with an illustration. Both can be dismissed.
Build a dashboard in 10 minutes
New: Sheet
Invite your team
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-surface…--alea-text-muted…
Space
--alea-space-2…--alea-space-5…
Radius
--alea-radius-lg…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-md…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…
Props
MediaCard props
A card that leads with media: an image or video beside (or above) a title, text and actions. For tutorials, promotions, onboarding.
| Prop | Type | Default | Description |
|---|---|---|---|
mediarequired | ReactNode | - | An image, video or illustration. |
titlerequired | ReactNode | - | The title. |
children | ReactNode | - | The text. |
className | string | - | Extra class names. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of the title. Default 3. |
layout | "horizontal" | "vertical" | 'horizontal' | horizontal (media on the side, default; stacks on narrow cards) or vertical (media on top). |
onDismiss | (() => void) | - | Adds a close button that calls this. |
primaryAction | ReactNode | - | The main action. |
secondaryAction | ReactNode | - | A second action. |
CalloutCard props
A card that suggests a next step: a title, a sentence, an action and an illustration. Dismissible.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | - | The title. |
children | ReactNode | - | The text. |
className | string | - | Extra class names. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of the title. Default 3. |
illustration | ReactNode | - | An illustration on the right (hidden on narrow cards). |
onDismiss | (() => void) | - | Adds a close button that calls this. |
primaryAction | ReactNode | - | The main action. |
secondaryAction | ReactNode | - | A second action. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
MediaCard
- Variants
layouthorizontalvertical- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-media-card.alea-card-inner.alea-media-card-media.alea-media-card-body.alea-media-card-title.alea-media-card-text.alea-media-card-actions.alea-card-dismiss- Data attributes
data-layout=verticaldata-layout=horizontal
CalloutCard
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-callout-card.alea-card-inner.alea-callout-card-body.alea-media-card-title.alea-media-card-text.alea-media-card-actions.alea-callout-card-art.alea-card-dismiss- Data attributes
data-layout=verticaldata-layout=horizontal
Accessibility
- The title is a heading (level 3 by default).
- Images are decorative unless you give them alt text; the close button is named Dismiss.
Do and don't
Do
- One clear action per card.
Don't
- Don't stack many dismissible callouts on one page.