eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
Email Rendering
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
Diagnostics
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
Diagnostics-pt-BR
EmailRealizer-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
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.