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

# CardGroup

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

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

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

### 2-Column

Default two-column grid.

**Authentication**

Secure your API with OAuth 2.0 and API keys.
  **Webhooks**

React to events in real time with push notifications.

~~~mdx
<CardGroup cols={2}>
  <Card title="Authentication" icon="lock">
    Secure your API with OAuth 2.0 and API keys.
  </Card>
  <Card title="Webhooks" icon="webhook">
    React to events in real time with push notifications.
  </Card>
</CardGroup>
~~~

### 3-Column

Three-column grid for denser layouts.

**REST**

Standard HTTP endpoints.
  **GraphQL**

Flexible query language.
  **WebSocket**

Real-time bidirectional data.

~~~mdx
<CardGroup cols={3}>
  <Card title="REST" icon="globe">
    Standard HTTP endpoints.
  </Card>
  <Card title="GraphQL" icon="diagram-project">
    Flexible query language.
  </Card>
  <Card title="WebSocket" icon="bolt">
    Real-time bidirectional data.
  </Card>
</CardGroup>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cols` | `number` | `2` | Number of columns in the grid. |

## Usage

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

~~~mdx
<CardGroup cols={2}>
  <Card title="Authentication" icon="lock">
    Secure your API with OAuth 2.0 and API keys.
  </Card>
  <Card title="Webhooks" icon="webhook">
    React to events in real time with push notifications.
  </Card>
</CardGroup>
~~~

## 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.
**[Card](/components/card)**

Versatile content containers that can display titles, icons, descriptions, and optional links.
**[Accordion](/components/accordion)**

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

## More

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