Card

A flexible container component for grouping related content with optional headers, footers, and actions.

Import

import { Card } from '@akitectio/aki-ui'

Basic Usage

Simple Card

This is a basic card with some content inside.

<Card className="p-6">
  <h3 className="text-lg font-semibold mb-2">Simple Card</h3>
  <p className="text-gray-600 dark:text-gray-300">
    This is a basic card with some content inside.
  </p>
</Card>

With Header and Footer

Card Title

New

This card has a header with a title and badge, plus a footer with actions.

Additional content can go here with proper spacing and typography.

<Card className="overflow-hidden">
  <div className="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-b">
    <div className="flex items-center justify-between">
      <h3 className="text-lg font-semibold">Card Title</h3>
      <Badge variant="primary">New</Badge>
    </div>
  </div>
  <div className="p-6">
    <p className="text-gray-600 dark:text-gray-300 mb-4">
      Card content goes here...
    </p>
  </div>
  <div className="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t">
    <div className="flex justify-end space-x-3">
      <Button variant="outline" size="sm">Cancel</Button>
      <Button variant="primary" size="sm">Save</Button>
    </div>
  </div>
</Card>

Interactive Cards

Fast Performance

Optimized for speed and efficiency

Reliable

Built with quality and stability in mind

<Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer 
               border-2 border-transparent hover:border-blue-200">
  <div className="flex items-start space-x-3">
    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
      <Icon className="w-5 h-5 text-blue-600" />
    </div>
    <div>
      <h3 className="font-semibold mb-1">Card Title</h3>
      <p className="text-sm text-gray-600">Card description...</p>
    </div>
  </div>
</Card>

Card Layouts

Horizontal Layout

Product Name

Brief product description here

$99

Grid Layout

1

Step 1

Description for step 1

2

Step 2

Description for step 2

3

Step 3

Description for step 3

API Reference

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-Card content
...propsHTMLDivElement-All standard div props

Best Practices

Do's

  • • Use cards to group related information together
  • • Keep card content scannable with clear hierarchy
  • • Use consistent spacing and padding
  • • Consider hover states for interactive cards
  • • Use semantic HTML structure within cards

Don'ts

  • • Don't nest cards too deeply
  • • Avoid overcrowding cards with too much content
  • • Don't use cards for single pieces of text
  • • Avoid inconsistent spacing between card elements