Card

Cards are versatile components for highlighting content, creating navigation links, or organizing information into distinct sections.

Basic Card

A simple card with a title:

<Card title="Getting Started">

  Begin your journey with our comprehensive quickstart guide.

</Card>

Card with Icon

Add an icon to make cards more visually distinctive:

<Card title="Documentation" icon="book">

  Explore our complete documentation to learn all features.

</Card>

Card with Link

Cards can link to other pages:

<Card title="API Reference" icon="code" href="/introduction">

  View the complete API documentation.

</Card>

Card with Arrow

Add an arrow indicator to show the card links somewhere. Arrows appear automatically for external links, but you can enable them for internal links too:

<Card title="View on GitHub" icon="github" href="/quickstart" arrow={true}>

  Check out the source code and contribute.

</Card>

External links show the arrow automatically:

<Card title="External Resource" href="https://example.com">

  This card links to an external site.

</Card>

Card with CTA

Add a call-to-action text below the card content:

<Card title="Premium Features" icon="star" href="/quickstart" cta="Upgrade now">

  Unlock advanced features and priority support.

</Card>

Combine arrow and CTA for maximum emphasis:

<Card title="Get Started" icon="rocket" href="/quickstart" arrow={true} cta="Start building">

  Everything you need to launch your first project.

</Card>

Card with Image

Display an image at the top of the card:

<Card title="Visual Guide" img="/images/hero.png">

  A card featuring an image header.

</Card>

CardGroup

Use CardGroup to arrange multiple cards in a responsive grid:

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">

    Get up and running in minutes.

</Card>
  <Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">

    Step-by-step learning paths.

</Card>
  <Card title="Examples" icon="flask" href="/components/overview">

    Real-world code examples.

</Card>
  <Card title="Community" icon="users" href="/help/github-integration">

    Join the discussion.

</Card>
</CardGroup>

Three Column Layout

<CardGroup cols={3}>
  <Card title="Docs" icon="book">

    Documentation

</Card>
  <Card title="API" icon="code">

    API Reference

</Card>
  <Card title="Blog" icon="newspaper">

    Latest updates

</Card>
</CardGroup>

Card Properties

CardGroup Properties