Docs Kickstarter

Card Group

Card groups are used to display multiple related cards in a grid or flex layout. They’re perfect for showcasing features, pricing tiers, or related content.

Basic Usage

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  <Card className="p-6">
    <h3 className="text-lg font-semibold">Feature One</h3>
    <p className="text-sm text-muted-foreground">Description of feature one.</p>
  </Card>
  <Card className="p-6">
    <h3 className="text-lg font-semibold">Feature Two</h3>
    <p className="text-sm text-muted-foreground">Description of feature two.</p>
  </Card>
  <Card className="p-6">
    <h3 className="text-lg font-semibold">Feature Three</h3>
    <p className="text-sm text-muted-foreground">Description of feature three.</p>
  </Card>
</div>

Example:

Feature One

Description of feature one.

Feature Two

Description of feature two.

Feature Three

Description of feature three.

With Icons

import { RocketIcon, GearIcon, LightningBoltIcon } from "@radix-ui/react-icons"

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  <Card className="p-6">
    <RocketIcon className="h-8 w-8 mb-4 text-primary" />
    <h3 className="text-lg font-semibold">Quick Start</h3>
    <p className="text-sm text-muted-foreground">Get up and running in minutes.</p>
  </Card>
  {/* ... other cards */}
</div>
import { Button } from "@/components/ui/button"

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  <Card className="p-6">
    <h3 className="text-lg font-semibold">Documentation</h3>
    <p className="text-sm text-muted-foreground mb-4">
      Learn how to integrate our tools into your app
    </p>
    <Button variant="outline" asChild>
      <a href="/docs-site-kickstarter/docs">Read Documentation</a>
    </Button>
  </Card>
  {/* ... other cards */}
</div>

Responsive Layout

The card group automatically adjusts its layout based on screen size:

  • Mobile: Single column
  • Tablet: Two columns
  • Desktop: Three columns
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {/* Cards */}
</div>

Custom Spacing

Adjust the gap between cards using Tailwind’s gap utilities:

<div className="grid grid-cols-1 gap-2 md:gap-4 lg:gap-6">
  {/* Cards with custom spacing */}
</div>

Best Practices

  1. Consistency

    • Keep card heights consistent when possible
    • Use similar content structure across cards
    • Maintain consistent spacing

  2. Responsiveness

    • Test different screen sizes
    • Adjust content for mobile
    • Consider touch targets

  3. Accessibility

    • Use proper heading hierarchy
    • Ensure sufficient contrast
    • Make interactive elements focusable

  4. Performance

    • Optimize images
    • Lazy load off-screen cards
    • Consider loading states