Card
A surface that groups related content and actions.
Usage
import { Card, CardHeader, CardContent, CardFooter } from '@acronis-platform/ui-react';Card is a compound component: a bordered, rounded surface assembled from parts.
CardHeader owns the title, an optional description, and most of the design's
interactive surface — a drag handle, a toggle switch, an avatar, a rename
button, inline extras, and end-aligned actions. CardContent holds the body;
CardFooter lays out actions in a row. All parts are optional; Card and
CardContent are polymorphic via Base UI's useRender (the render prop).
There is no --ui-card-* token tier — the surface, text, and border resolve to
the shared semantic tokens (--ui-background-surface-primary,
--ui-text-on-surface-primary, --ui-border-on-surface-border, swapping to
--ui-border-on-surface-border-error when hasError is set).
Examples
A card with a header, body, and footer actions:
<Card className="w-[350px]">
<CardHeader title="Backup status" description="Last successful run 5 minutes ago." hasDescription />
<CardContent>
<p>All 24 workloads are protected and up to date.</p>
</CardContent>
<CardFooter className="gap-2">
<Button>View report</Button>
<Button variant="secondary">Run now</Button>
</CardFooter>
</Card>An error state — only the root border color changes:
<Card hasError className="w-[350px]">
<CardHeader title="Backup status" description="Last run failed." hasDescription />
<CardContent>
<p>Retry the job or check the agent logs.</p>
</CardContent>
</Card>A reorderable, switchable card with an avatar and rename:
<Card className="w-[420px]">
<CardHeader
title="Backup policy"
isDraggable
isSwitchable
defaultSwitchChecked
hasAvatar
avatarLabel="SB"
hasRename
onRename={() => setRenaming(true)}
/>
<CardContent>
<p>Every header feature combined: drag, switch, avatar, rename.</p>
</CardContent>
</Card>Just content, no header or footer:
<Card className="w-[350px]">
<CardContent className="pt-4">
<p>A bare card with content and no header or footer.</p>
</CardContent>
</Card>Collapsible
Compose Card with AccordionContainer (the shared disclosure primitive):
wrap CardContent/CardFooter in AccordionContainer.Content and set
CardHeader's isCollapsible to render the trigger — restyled to match this
design's ghost ButtonIcon chrome rather than AccordionContainer's own
neutral default. isCollapsible only has an effect when the header renders
inside a collapsible AccordionContainer; it's a no-op otherwise. The header
itself stays visible in both states — only the content wrapped in
AccordionContainer.Content is hidden while collapsed.
import { AccordionContainer, Card, CardContent, CardHeader } from '@acronis-platform/ui-react';
<Card className="w-[350px]">
<AccordionContainer collapsible defaultOpen>
{({ open }) => (
<>
<CardHeader
title="Backup policy"
description={open ? 'Applies to 12 workloads.' : '12 workloads · last run 5 minutes ago'}
hasDescription
isCollapsible
collapseLabel="Toggle backup policy"
/>
<AccordionContainer.Content>
<CardContent>
<p>Collapse the card to hide the content while keeping the header visible.</p>
</CardContent>
</AccordionContainer.Content>
</>
)}
</AccordionContainer>
</Card>API Reference
Card (the root) and CardHeader are the two parts with their own props;
CardContent and CardFooter share a plain div + render prop contract.
Card
Prop
Type
CardHeader
Prop
Type
CardContent / CardFooter
Prop
Type