Skip to content

Card Component

Description

The Card component is a versatile container that can display structured content, such as headers, actions, and clickable areas.

Props

Card

Prop Type Default Description
isSelected boolean false Adds a selected state style to the card.

CardHeader

Prop Type Default Description
title string "" The title displayed at the top of the card.
action ReactNode null Additional action elements (e.g., buttons).

CardContent

Prop Type Default Description
children ReactNode null Content inside the card body.

CardActionArea

Prop Type Default Description
onClick () => void undefined Callback when the area is clicked.
disabled boolean false Disables the action area.
href string "" Optional link instead of a button.
target "_blank" , "_self" , "_parent" , "_top" undefined Specifies how the link opens.

CardActions

Prop Type Default Description
justifyContent "flex-start" , "center" , "flex-end" , "space-between" "flex-end" Controls the alignment of action buttons.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { Card, CardHeader, CardContent, CardActionArea, CardActions, Button } from "@nomana-it/liberty-core"

export const CardExample = () => {
  return (
    <Card isSelected={true}>
      <CardHeader title="Card Title" action={<Button variant="text">Edit</Button>} />
      <CardContent>
        This is the content inside the card. You can add text, images, or other elements here.
      </CardContent>
      <CardActionArea onClick={() => alert("Card Clicked!")}>
        Clickable Area
      </CardActionArea>
      <CardActions>
        <Button variant="contained" onClick={() => alert("Action Clicked!")}>Action</Button>
      </CardActions>
    </Card>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core