Card

A versatile container for grouping related content and actions.

Basic Usage

This is a basic card with some content.

dart
1
2
3
4
5
DCard(
  children: [
    p([Component.text('This is a basic card with some content.')]),
  ],
)

With Header

Card Title

A brief description of this card.

Card body content goes here.

dart
1
2
3
4
5
6
7
8
9
DCard(
  header: DCardHeader(
    title: 'Card Title',
    description: 'A brief description of this card.',
  ),
  children: [
    p([Component.text('Card body content goes here.')]),
  ],
)

With Header and Footer

Settings

Manage your account settings.

Configure your preferences below.

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
DCard(
  header: DCardHeader(
    title: 'Settings',
    description: 'Manage your account settings.',
  ),
  children: [
    p([Component.text('Configure your preferences below.')]),
  ],
  footer: DCardFooter(
    children: [
      DButton(label: 'Cancel', variant: DButtonVariant.ghost),
      DButton(label: 'Save'),
    ],
  ),
)

Variants

Outline (default)

Card with outline border.

Solid

Card with solid background.

Soft

Card with soft background.

Subtle

Card with subtle styling.

dart
1
2
3
4
DCard(...)
DCard(...)
DCard(...)
DCard(...)

Header with Trailing Action

Notifications

Manage your notification preferences.

You have 3 unread notifications.

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DCard(
  header: DCardHeader(
    title: 'Notifications',
    description: 'Manage your notification preferences.',
    trailing: DButton(
      label: 'Edit',
      variant: DButtonVariant.ghost,
      size: DButtonSize.sm,
    ),
  ),
  children: [
    p([Component.text('You have 3 unread notifications.')]),
  ],
)

No Padding

Use noPadding for content that needs edge-to-edge display.

Image Card

Full-width content
dart
1
2
3
4
5
6
7
8
9
10
DCard(
  noPadding: true,
  header: DCardHeader(title: 'Image Card'),
  children: [
    div(
      classes: 'h-32 bg-gradient-to-br from-cyan-500 to-purple-600',
      [Component.text('Full-width content')],
    ),
  ],
)

Profile Card Example

John Doe

Senior Developer

[email protected]
San Francisco, CA
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
DCard(
  header: DCardHeader(
    title: 'John Doe',
    description: 'Senior Developer',
    trailing: DAvatar(src: '...'),
  ),
  children: [
    div(classes: 'space-y-2', [
      // Contact info
    ]),
  ],
  footer: DCardFooter(
    children: [
      DButton(label: 'Message', variant: DButtonVariant.outline),
      DButton(label: 'Follow'),
    ],
  ),
)

API Reference

DCard

Prop Type Default Description
header Component? null Header content (use DCardHeader)
footer Component? null Footer content (use DCardFooter)
children List<Component> [] Card body content
variant DCardVariant outline Visual style
noPadding bool false Remove body padding
classes String? null Additional CSS classes

DCardHeader

Prop Type Default Description
title String? null Header title
description String? null Header subtitle/description
trailing Component? null Trailing component (button, avatar)
children List<Component> [] Additional header content

DCardFooter

Prop Type Default Description
children List<Component> [] Footer content
classes String? null Additional CSS classes