Ritro UI logo

Card

A container component for displaying content in a distinct, styled container.

Installation

npm install @ritro-ui/react@1.2.0

Import

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@ritro-ui/react"

Usage

Card Title

Card Description

This is the main content of the card. You can put any content here.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Props

Component
Props
Type
Description
Card
className
string
Additional CSS classes
CardHeader
className
string
Additional CSS classes
CardFooter
className
string
Additional CSS classes

Examples

Card with Image

Card with Image

This card includes an image at the top.

<Card>
  <div className="relative h-48">
    <Image src="/your-image.jpg" alt="Card image" fill className="object-cover" />
  </div>
  <CardContent>
    <h3 className="text-lg font-bold mb-2">Card with Image</h3>
    <p className="text-sm">This card includes an image at the top.</p>
  </CardContent>
</Card>