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.