> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Card

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

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Card playground on holydocs.com](https://holydocs.com/components/card).

## When to use

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

## Live Examples

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

### Basic

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>
~~~

### With Link

Clickable card that navigates to a URL.

**[API Reference](/api)**

Explore the full REST API with interactive examples.

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

### Horizontal

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>
~~~

### Content Only

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>
~~~

## Props

| 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. |

## Usage

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>
~~~

## Tips

- 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.

## Related Components

**[Callout](/components/callout)**

Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
**[CardGroup](/components/card-group)**

Responsive grid container for laying out multiple cards in even columns.
**[Accordion](/components/accordion)**

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

## More

- Interactive playground: [Card on holydocs.com](https://holydocs.com/components/card)
- Component library index: [/components](/components)