EditorialCard
EditorialCard — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
EditorialCard — Prism component.
Accessibility
When the whole card is actionable, expose a single accessible name and make it reachable with Tab + Enter. Decorative imagery uses empty alt.
Import
const { EditorialCard } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
image | string | — | Thumbnail image URL; a placeholder renders when absent. |
imageAlt | string | — | |
eyebrow | React.ReactNode | — | |
title | React.ReactNode | — | |
description | React.ReactNode | — | |
meta | React.ReactNode[] | — | Metadata chips shown as a dot-separated row (e.g. ["8 min read","Design"]). |
actions | React.ReactNode | — | Action nodes (Buttons) shown at the bottom. |
layout | "stack" | "row" | — | "stack" (image on top) or "row" (image beside body). |
onPress | (e: React.SyntheticEvent) => void | — | |
href | string | — | |
className | string | — |