Layout

Card

A card groups a heading and a few lines in a bordered block. Cards are usually placed in a grid.

Live demo

Click the deck, then use ← → · 2 slides · 00:15Open fullscreen →

Syntax

MarkdownMarkdown
:::card
### 🚀 Lorem ipsum
- Dolor sit amet
- Consectetur adipiscing
:::
MDXMDX
<Card title="Lorem ipsum">Dolor sit amet.</Card>

Attributes and props

PropTypeDefaultDescription
titlestring—Optional heading (MDX only)
classNamestring—Extra CSS classes (MDX only)

In Markdown, the first heading inside the card plays the role of the title.

In other formats

FormatStatusNotes
deckAvailableRendered in slides, the presenter console and the HTML and PDF exports.
docsAvailableThrough <StoryEmbed slug="…" /> in any page of a site.
motionAvailableAnimated block in a film.
reportPlanned · P6Section of a paged report.
toonPlanned · P7Panel of a vertical strip.
bookPlanned · P8Block of a printable chapter.
Last modified on