ArticleCard
Markdown for agentsLinked article or resource card with media, eyebrow, title, summary and metadata.
npx @slipstream-ui/cli@latest add article-cardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Article title. |
| description | string | — | Summary copy. |
| href | string | required | Destination URL. |
| eyebrow | string | — | Category or content type. |
| media | ReactNode | — | Image, illustration or video poster. |
| meta | ReactNode | — | Date, read time, author or other metadata. |
| linkComponent | React.ElementType | — | Custom link element for routers. |
| variant | 'default' | 'compact' | 'default' | Standard or compact card. |
Accessibility
- The whole card is one link; do not nest buttons or links inside it.
- Use alt="" for decorative covers or a meaningful alt for informative images.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.