Card

A flexible card component for displaying content with optional header, body, and footer.

Basic Usage

Card content goes here.

import { Card, CardHeader, CardBody, CardFooter } from 'uiplex';

<Card>
  <CardHeader>Card Title</CardHeader>
  <CardBody>Card content goes here.</CardBody>
  <CardFooter>Footer</CardFooter>
</Card>

Header and Body Only

Content without a footer.

<Card>
  <CardHeader>Simple Card</CardHeader>
  <CardBody>Content without a footer.</CardBody>
</Card>

Card with Image (theme-adjusted)

Europe Street beat

www.instagram.com

import { Card, CardImage, CardBody, CardTitle, CardSubtitle } from 'uiplex';

// Default variant – follows light/dark theme
<Card style={{ maxWidth: 320 }}>
  <CardImage src="/your-image.jpg" alt="Card" />
  <CardBody>
    <CardTitle>Europe Street beat</CardTitle>
    <CardSubtitle>www.instagram.com</CardSubtitle>
  </CardBody>
</Card>

Card with Image – Dark or Light variant

Always dark

variant="dark"

Always light

variant="light"

<Card variant="dark">...</Card>
<Card variant="light">...</Card>

With Actions

Description and details.

<Card>
  <CardHeader>Product</CardHeader>
  <CardBody>Description and details.</CardBody>
  <CardFooter>
    <Button variant="primary" size="sm">Save</Button>
    <Button variant="outline" size="sm">Cancel</Button>
  </CardFooter>
</Card>

API Reference

Card

Prop	Type	Default	Description
variant	"default" \| "dark" \| "light"	"default"	Default follows theme. Use "dark" or "light" to force a look.
children	React.ReactNode	-	Card content
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles

CardImage

Prop	Type	Default	Description
src	string	-	Image URL (required)
alt	string	-	Alt text (required)
className	string	""	Additional CSS classes

CardTitle, CardSubtitle

Prop	Type	Default	Description
children	React.ReactNode	-	Title or subtitle text

CardHeader, CardBody, CardFooter

Prop	Type	Default	Description
children	React.ReactNode	-	Section content
className	string	""	Additional CSS classes