eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsSurfaces & display
Card
View source
1 min read
A grouping surface around a single child. Padding defaults to Space.S4; the kind decides whether it is elevated, outlined or filled.
1
using eQuantic.UI.Components;
KINDS
Card
shadow
Card
hairline
Card
subtle fill
Usage
1
2
3
4
5
6
7
8
9
new Card(new Column(gap: Space.S2)
{
new Text("Balance", TypeRole.Label),
new Text("R$ 12.480,00", TypeRole.Display),
})
{
Kind = CardKind.Outlined,
Width = SizeValue.Fill,
}
API
Prop
Type
Default
Description
Child
VisualNode
The card's content — compose a Column for header/body/footer.
Kind
CardKind
Elevated
Elevated, Outlined or Filled. Pick one per surface level and hold it.
Padding
EdgeInsets
EdgeInsets.All(Space.S4)
Inner padding.
Width
SizeValue
Auto
Auto, Fill, or a fixed size.
States
State
Rendering
Rest
Its kind
Pressed
Only when wrapped in a Pressable
Accessibility
A plain card is a group. If the whole card is pressable, it must be a single target with one accessible name — never with other controls inside.
When to use
Grouping content that belongs together and moves as a unit.
Avoid
Cards inside cards.
A card around every element — the page turns to noise.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Card.cs.