Card

This component renders a card with a title, description, and image.

Import

import {Card} from "cui-react";

Example

Render a card:

Sample Card

This is a sample card component.

Code:

 
  <Card
    title="Sample Card"
    description="This is a sample card component."
    imageUrl="https://cdn.pixabay.com/photo/2020/05/24/11/24/strawberry-5213787_1280.jpg"
    size="medium"
    color="default"
  />
 

Customizing

You can customize the Card component using the following props:

title (required): Title of the card. description (required): Description or content of the card. imageUrl (required): URL of the image to display on the card. size (optional): Size variant of the card (small, medium, large). Defaults to medium. color (optional): Border color variant of the card (default, primary, secondary, danger). Defaults to default.

Example: Custom Size and Color

Visual:

Another Card

This is another sample card component.

Code:

 
  <Card
    title="Sample Card"
    description="This is a sample card component."
    imageUrl="https://cdn.pixabay.com/photo/2020/05/24/11/24/strawberry-5213787_1280.jpg"
    size="small"
    color="default"
  />
 

This example renders a large card with a primary border color.

Props title

Type: string Description: Title of the card. description

Type: string Description: Description or content of the card. imageUrl

Type: string Description: URL of the image to display on the card. size

Type: "small" | "medium" | "large" Description: Size variant of the card. color

Type: "default" | "primary" | "secondary" | "danger" Description: Border color variant of the card.