Primitive

Card

Displays a card with header, content, and footer sections.

Create project

Deploy your new project in one-click.

Project settings and configuration.

Installation

npx benflux-ui add card

Usage

import { Card, CardHeader, CardTitle, CardContent } from "@benflux-ui/react"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Content goes here.</CardContent>
</Card>

Variants

Default

Outlined

Elevated

Glow

Props

Prop	Type	Default	Description
variant	"default" \| "outlined" \| "elevated" \| "glow" \| "glass" \| "gradient"	"default"	Visual style of the card
padding	"none" \| "sm" \| "default" \| "lg"	"default"	Internal padding of the card