FluxCard

A surface container with optional header, required body, and optional footer. Pick emphasis=subtle for secondary content, outline for delineated groups, elevated for prominent callouts. Children are referenced by id — never inline them.

Extends: Column (a2ui/basic@0.10)

Category: compound

Props

Name	Type	Required	Default
accessibility	object	no	``
body	string	yes	``
component	'FluxCard'	yes	``
emphasis	'subtle' | 'outline' | 'elevated'	yes	'subtle'
footer	string	no	``
header	string	no	``
id	string	yes	``
padding	'sm' | 'md' | 'lg'	yes	'md'

Examples

Simple card with body content.

UI.card(body="card_body_text")

Outline card with header + body + footer action row.

UI.card(emphasis="outline", padding="lg", header="card_title", body="card_body", footer="card_action_row")

Anti-patterns

Avoid: Cards inside cards creates visual noise. Use a Stack or FluxStack for grouping within a single card.

UI.card(body=other_card_id)

Tokens used

• $color.bg.subtle

• $color.bg.surface

• $color.border.default

• $radius.lg

• $radius.md

• $radius.xl

• $shadow.md

• $shadow.sm

• $space.3

• $space.4

• $space.6

Basic-catalog fallback

• Component: Column

• Prop map: body → child, footer → child, header → child

• Notes: Basic renderers drop emphasis + padding tokens; the column stacks its slot children top-to-bottom with no surface styling.