A container component that groups related content with a distinct visual treatment. Cards provide elevation, background, and rounded corners to create visual hierarchy.
Card extends all FlexLayout props:
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "tonal" | "floating" | "flat" | "default" | Structure and elevation treatment |
| material | Material | - | Optional atmospheric surface material |
| padding | Padding | "large" | Internal padding |
| gap | Gap | "large" | Space between children |
| direction | "row" | "column" | "column" | Flex direction |
| align | Align | - | Cross-axis alignment |
| justify | Justify | - | Main-axis alignment |
| grow | boolean | - | Allow card to grow |
Cards group related content together with visual distinction from the surrounding interface.
<Card>
<H3>Card title</H3>
<P>Card content goes here...</P>
</Card>
Material controls the card's surface appearance independently from its elevation variant. Material is a shared JSS type, so surface components can use the same named treatments consistently.
Diffuse blue-green light.
Pale sky with peach and gold.
Neutral, milky diffusion.
Indigo with fading violet warmth.
<Card material="aurora">
<H3>Aurora</H3>
<P>Atmospheric surface content</P>
</Card>
Use variant when the distinction is elevation rather than material:
<Card variant="floating">Floating content</Card>
Use flat for full-bleed application regions where Card layout is useful but rounded corners and elevation are not:
<Card variant="flat" material="aurora">
Navigation
</Card>
Send us a message and we'll get back to you soon.
<Card>
<H3>Contact Us</H3>
<P>Send us a message and we'll get back to you soon.</P>
<TextInput
placeholder="Your email"
value={email}
type="email"
onValueChange={setEmail}
/>
<TextInput
placeholder="Your message"
value={message}
onValueChange={setMessage}
/>
<Button color="primary" onClick={handleSubmit}>
Send Message
</Button>
</Card>
<Row gap="medium" align="flex-start">
<Card padding="small" gap="small">
<Span>Card title</Span>
<Span color="secondary">Supporting text</Span>
</Card>
<Card padding="xlarge" gap="large">
<Span>Card title</Span>
<Span color="secondary">Supporting text</Span>
</Card>
</Row>
Use direction="row" for horizontal layouts:
<Card direction="row" align="center" gap="medium">
<Icon icon="user" color="highlight" size="xlarge" />
<Column gap="none">
<Span bold>John Doe</Span>
<Span color="secondary" size="small">
Software Engineer
</Span>
</Column>
</Card>
Cards are useful for: