Components

Card

Display content in cards

Cards display related content or navigation links.

Basic Card

🚀

Getting Started

Learn how to set up Barodoc for your project.

<Card title="Getting Started" icon="🚀">
  Learn how to set up Barodoc for your project.
</Card>

Card with Link

📚

Documentation

Read the full documentation to learn more.

<Card title="Documentation" icon="📚" href="/docs/introduction">
  Read the full documentation.
</Card>

Card Group

Group multiple cards in a responsive grid:

📦

Installation

Install Barodoc in your project.

⚙️

Configuration

Configure your documentation site.

🧩

Components

Explore available components.

🚀

Deployment

Deploy to GitHub Pages.

<CardGroup cols={2}>
  <Card title="Installation" icon="📦" href="/docs/guides/installation">
    Install Barodoc in your project.
  </Card>
  <Card title="Configuration" icon="⚙️" href="/docs/guides/configuration">
    Configure your documentation site.
  </Card>
</CardGroup>

Three Columns

⚡

Fast

Built on Astro for speed.

✨

Simple

Zero-config setup.

🔧

Flexible

Fully customizable.

<CardGroup cols={3}>
  <Card title="Fast" icon="⚡">Built on Astro.</Card>
  <Card title="Simple" icon="✨">Zero-config.</Card>
  <Card title="Flexible" icon="🔧">Customizable.</Card>
</CardGroup>

Props

Card

titlestringrequired

Card title text

iconstring

Emoji icon displayed before the title

hrefstring

Link URL (makes the entire card clickable)

CardGroup

cols1 | 2 | 3 | 4default: 2

Number of columns in the grid layout