Fluxo UIFluxo UIv0.1.1

Card

Versatile content container with header, body, footer, and optional cover — in five visual variants and both vertical and horizontal orientations.

Basic Usage

Basic Card

Card with title, subtitle, actions, and footer.

Project Atlas
Updated 2 hours ago
Redesign of the main dashboard with improved analytics and deeper drill-downs.
import { Card, Button } from 'fluxo-ui';

<Card
    title="Project Atlas"
    subtitle="Updated 2 hours ago"
    actions={<Button label="Open" size="xs" variant="primary" />}
    footer={<Button label="View details" size="sm" layout="plain" />}
>
    Redesign of the main dashboard with improved analytics and deeper drill-downs.
</Card>

Variants

Variants

Five visual styles.

Elevated
Soft shadow, no border
Card body content lives here.
Outlined
Border, no shadow
Card body content lives here.
Filled
Subtle background
Card body content lives here.
Ghost
Transparent, just padding
Card body content lives here.
<Card variant="elevated" title="Elevated">...</Card>
<Card variant="outlined" title="Outlined">...</Card>
<Card variant="filled" title="Filled">...</Card>
<Card variant="ghost" title="Ghost">...</Card>
<Card variant="interactive" title="Interactive" onClick={() => {}}>...</Card>

Cover & Orientation

With Cover Media & Orientation

Vertical and horizontal layouts with a cover slot.

Mountain
Aurora Peak
Iceland — 2024
Seven day hike across the northern ridge.
Mountain
Desert Dunes
Morocco — 2025
Guided three-day trek through the Sahara with camel support and star-lit camping.
<Card
    variant="elevated"
    padding="md"
    cover={<img src="..." alt="" />}
    title="Aurora Peak"
    subtitle="Iceland — 2024"
    actions={<Button label="Save" size="xs" variant="primary" />}
>
    Seven day hike across the northern ridge.
</Card>

Import

import { Card } from 'fluxo-ui';
import type { CardProps, CardVariant } from 'fluxo-ui';

Props

variant
'elevated' | 'outlined' | 'filled' | 'ghost' | 'interactive'"'outlined'"

Visual style.

padding
'none' | 'sm' | 'md' | 'lg'"'md'"

Body padding preset.

orientation
'vertical' | 'horizontal'"'vertical'"

Layout direction (horizontal puts cover on the left).

size
'sm' | 'md' | 'lg'"'md'"

Overall size preset.

title
ReactNode

Header title.

subtitle
ReactNode

Header subtitle.

actions
ReactNode

Header right-side actions (usually buttons).

cover
ReactNode

Top (or left) media slot.

footer
ReactNode

Footer area.

loading
boolean"false"

Show shimmer overlay.

as
'div' | 'a' | 'button'

Render as a different element.

href
string

When set, card renders as a link.

onClick
(e) => void

Click handler (makes the card interactive).