CardGroup

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

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

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

PropTypeDefaultDescription
colsnumber2Number 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.
Callout

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

Learn More
Card

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

Learn More
Accordion

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

Learn More

More

Previous Card
Next Tile
Ask a question... ⌘I