Card

Versatile content containers that can display titles, icons, descriptions, and optional links.

For isolated previews, theme switching, and sandbox editing, open the Card playground on holydocs.com .

When to use

Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Card with title and icon.

Getting Started

Everything you need to ship your first docs in minutes.

mdx
<Card title="Getting Started" icon="rocket">  Everything you need to ship your first docs in minutes.</Card>

Clickable card that navigates to a URL.

API Reference

Explore the full REST API with interactive examples.

Learn More

mdx
<Card title="API Reference" icon="code" href="/api">  Explore the full REST API with interactive examples.</Card>

Icon and content displayed side by side.

Quickstart

Up and running in under five minutes.

mdx
<Card title="Quickstart" icon="bolt" horizontal>  Up and running in under five minutes.</Card>

Card without a title or icon for free-form content.

Use cards to highlight any content — quotes, stats, or feature blurbs.

mdx
<Card>  Use cards to highlight any content — quotes, stats, or feature blurbs.</Card>

Prop	Type	Default	Description
`title`	`string`	`--`	Heading text displayed at the top of the card.
`icon`	`string`	`--`	Icon name or emoji shown alongside the title.
`href`	`string`	`--`	Makes the entire card a clickable link.
`horizontal`	`boolean`	`false`	Renders the icon and content side by side.

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<Card title="Getting Started" icon="rocket">  Everything you need to ship your first docs in minutes.</Card>

Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.

Callout

Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.

Learn More

CardGroup

Responsive grid container for laying out multiple cards in even columns.

Learn More

Accordion

Collapsible sections for FAQs, optional details, and content that benefits from progressive disclosure.

Learn More

Was this page helpful?