Skip to content
Doculite

Command Palette

Search for a command to run...

GitHub

Cards

Display linked cards in grid layouts.

Cards present navigation links or feature highlights in a visual grid. Use CardGroup to arrange multiple cards.

Card Group

<CardGroup>
  <Card title="Getting Started" href="/docs/getting-started/installation">
    Learn how to install and set up Doculite.
  </Card>
  <Card title="Writing Content" href="/docs/writing-content/mdx-basics">
    Write documentation with MDX.
  </Card>
</CardGroup>

Three Columns

Callout

Highlight important information.

Tabs

Organize content into panels.

Steps

Numbered step-by-step guides.
<CardGroup cols={3}>
  <Card title="Callout">Highlight important information.</Card>
  <Card title="Tabs">Organize content into panels.</Card>
  <Card title="Steps">Numbered step-by-step guides.</Card>
</CardGroup>

Props

CardGroup

PropTypeDefaultDescription
cols2 | 32Number of columns

Card

PropTypeDescription
titlestringCard heading
hrefstring?Optional link URL