Card

A container component that groups related content and actions.

Usage

import { Card } from "@rhinolabs/ui"

export default function CardDemo() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Card Title</Card.Title>
        <Card.Description>Card Description</Card.Description>
      </Card.Header>
      <Card.Content>
        <p>Card Content</p>
      </Card.Content>
      <Card.Footer>
        <p>Card Footer</p>
      </Card.Footer>
    </Card>
  )
}

Examples

Simple Card

A basic card with title and content.

<Card>
  <Card.Header>
    <Card.Title>Create project</Card.Title>
    <Card.Description>Deploy your new project in one-click.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Your new project will be created in your workspace.</p>
  </Card.Content>
</Card>

With Footer Actions

A card with footer actions.

<Card>
  <Card.Header>
    <Card.Title>Team Members</Card.Title>
    <Card.Description>Invite your team members to collaborate.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Current team members will be displayed here.</p>
  </Card.Content>
  <Card.Footer className="flex justify-between">
    <button>Cancel</button>
    <button>Invite</button>
  </Card.Footer>
</Card>

As Article

Using the card as an article container.

<Card>
  <Card.Header>
    <Card.Title>Latest Updates</Card.Title>
    <Card.Description>Posted on January 24, 2024</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Read about our latest product updates and news.</p>
  </Card.Content>
  <Card.Footer>
    <p className="text-sm text-muted-foreground">Written by John Doe</p>
  </Card.Footer>
</Card>

Props

All Card components accept standard HTML div attributes.

Design Considerations

• Use consistent spacing between card elements
• Maintain clear visual hierarchy
• Keep content concise and focused
• Use appropriate padding for content
• Consider mobile responsiveness

Accessibility

• Uses semantic HTML structure
• Maintains proper heading hierarchy
• Ensures content is readable
• Provides clear visual boundaries
• Supports keyboard navigation