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