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

Avatar
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 image

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