dxCard Component Showcase
Basic & Variants
Basic (Elevated)
Simple card content.
Default: elevated, bordered, background=secondary
outlined Card
outlined style example.
variant="outlined"
Flat Card
Flat style example.
variant="flat"
Gradient Weather
23°C
Partly Cloudy
Humidity: 65%Wind: 12km/h
Props Demonstration
Bordered=false (flat)
No border applied
Background='accent'
Uses accent background
Align/Justify (in slot)
Bottom Left
Bottom Right
noPadding=true
Content touches edges
fullHeight
Normal Height
Adapts
fullHeight=true
Stretches
customClass
Red dashed border
Complex Examples (using dxCard)
Profile
John Doe
Frontend Developer
1.2k
Followers
234
Following
Stock
AAPL
+2.4%$156.78
Open:$154.23High:$157.12Close:$156.78Low:$153.89
Analytics
Performance Metrics
Visitors85%
85%
Sales Conversion65%
65%
Bounce Rate35%
35%
Card With Image
Image touches edges. Padding added manually below.
Interactive & Complex
Tasks
Today's Tasks
3 remaining tasks
Settings
System Preferences
Enable Notifications
Dark Mode
Email Updates
Card with Actions
Demonstrates actions in the footer area.
Revenue
$92K
Total Revenue (Q3)
Users
1.5M
Active Users