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

# Card

Display content in a styled container with optional links and icons.

Use the `Card` component to present content in a bordered container. Cards work well for feature highlights, navigation links, and content grids.

## Basic card

```mdx
<Card title="Getting started">
  Learn how to set up your first documentation project.
</Card>
```

### Getting started

Learn how to set up your first documentation project.

## Link card

Add an `href` prop to make the entire card clickable. An arrow indicator appears automatically:

```mdx
<Card title="Quickstart guide" href="/quickstart">
  Set up a documentation site in under five minutes.
</Card>
```

### [Quickstart guide](/quickstart)

Set up a documentation site in under five minutes.

## Card with call to action

Use the `cta` prop to display a text label at the bottom of the card:

```mdx
<Card title="Custom domains" href="/features/custom-domains" cta="Learn more">
  Serve your docs from your own domain with automatic SSL.
</Card>
```

### [Custom domains](/features/custom-domains)

Serve your docs from your own domain with automatic SSL.

## Card grid

Combine cards with `Columns` to create a responsive grid:

```mdx
<Columns cols={2}>
  <Card title="CLI reference" href="/cli/overview">
    Commands for building and deploying docs.
  </Card>
  <Card title="Configuration" href="/configuration/docs-json">
    Customize your project settings.
  </Card>
  <Card title="MDX basics" href="/content/mdx-basics">
    Write documentation with Markdown and JSX.
  </Card>
  <Card title="Search" href="/features/search">
    Full-text search built into every project.
  </Card>
</Columns>
```

  ### [CLI reference](/cli/overview)

Commands for building and deploying docs.
  ### [Configuration](/configuration/docs-json)

Customize your project settings.
  ### [MDX basics](/content/mdx-basics)

Write documentation with Markdown and JSX.
  ### [Search](/features/search)

Full-text search built into every project.

## Horizontal layout

Set `horizontal` to arrange the icon and content side by side:

```mdx
<Card title="Horizontal card" horizontal>
  Content flows beside the icon in a horizontal layout.
</Card>
```

### Horizontal card

Content flows beside the icon in a horizontal layout.

## Props

- `title` (type: string, required: false): Heading displayed at the top of the card.
- `icon` (type: ReactNode, required: false): Icon rendered above the title.
- `color` (type: string, required: false): Custom color for the icon.
- `href` (type: string, required: false): URL that makes the card clickable. External links open in a new tab.
- `horizontal` (type: boolean, required: false): Arrange icon and content side by side.
- `img` (type: string, required: false): Image URL displayed at the top of the card.
- `cta` (type: string, required: false): Call-to-action text displayed at the bottom.
- `children` (type: ReactNode, required: false): Card body content.