DescriptionCard

Label/value metadata summary card

DescriptionCard#

DescriptionCard displays label/value pairs as a structured metadata summary — useful for order details, profiles, plant care notes, exam results, or any place that needs a tidy "card of facts".

Live Preview#

default

Web

Order Detail

Order

ORD-2025-00391

Item

AirPods Pro 2

Total

$369.00

Flutter

Loading Flutter...

class DescriptionCardDefaultExample extends StatelessComponent {
  const DescriptionCardDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return const DescriptionCard(
      title: 'Order Detail',
      rows: [
        DescriptionRow(label: 'Order', value: 'ORD-2025-00391'),
        DescriptionRow(label: 'Item', value: 'AirPods Pro 2'),
        DescriptionRow(label: 'Total', value: r'$369.00', isEmphasized: true),
      ],
    );
  }
}

class DescriptionCardDefaultExample extends StatelessWidget {
  const DescriptionCardDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const DescriptionCard(
      title: 'Order Detail',
      rows: [
        DescriptionRow(label: 'Order', value: 'ORD-2025-00391'),
        DescriptionRow(label: 'Item', value: 'AirPods Pro 2'),
        DescriptionRow(label: 'Total', value: '$369.00', isEmphasized: true),
      ],
    );
  }
}

filled

Web

Profile

Name

Hong Gildong

hong@example.com

Phone

010-1234-5678

Flutter

Loading Flutter...

class DescriptionCardFilledExample extends StatelessComponent {
  const DescriptionCardFilledExample({super.key});

  @override
  Component build(BuildContext context) {
    return const DescriptionCard(
      title: 'Profile',
      variant: CoreDescriptionCardVariant.filled,
      rows: [
        DescriptionRow(label: 'Name', value: 'Hong Gildong'),
        DescriptionRow(label: 'Email', value: 'hong@example.com'),
        DescriptionRow(label: 'Phone', value: '010-1234-5678'),
      ],
    );
  }
}

class DescriptionCardFilledExample extends StatelessWidget {
  const DescriptionCardFilledExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const DescriptionCard(
      title: 'Profile',
      variant: CoreDescriptionCardVariant.filled,
      rows: [
        DescriptionRow(label: 'Name', value: 'Hong Gildong'),
        DescriptionRow(label: 'Email', value: 'hong@example.com'),
        DescriptionRow(label: 'Phone', value: '010-1234-5678'),
      ],
    );
  }
}

ghost

Web

Name

Kim Cheolsu

kim@example.com

Phone

010-1234-5678

Flutter

Loading Flutter...

class DescriptionCardGhostExample extends StatelessComponent {
  const DescriptionCardGhostExample({super.key});

  @override
  Component build(BuildContext context) {
    return const DescriptionCard(
      variant: CoreDescriptionCardVariant.ghost,
      rows: [
        DescriptionRow(label: 'Name', value: 'Kim Cheolsu'),
        DescriptionRow(label: 'Email', value: 'kim@example.com'),
        DescriptionRow(label: 'Phone', value: '010-1234-5678'),
      ],
    );
  }
}

class DescriptionCardGhostExample extends StatelessWidget {
  const DescriptionCardGhostExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const DescriptionCard(
      variant: CoreDescriptionCardVariant.ghost,
      rows: [
        DescriptionRow(label: 'Name', value: 'Kim Cheolsu'),
        DescriptionRow(label: 'Email', value: 'kim@example.com'),
        DescriptionRow(label: 'Phone', value: '010-1234-5678'),
      ],
    );
  }
}

vertical

Web

Plant Care

Species

Monstera Deliciosa

Watering

Every 7 days

Light

Indirect bright light

Temperature

18°C – 27°C

Flutter

Loading Flutter...

class DescriptionCardVerticalExample extends StatelessComponent {
  const DescriptionCardVerticalExample({super.key});

  @override
  Component build(BuildContext context) {
    return const DescriptionCard(
      title: 'Plant Care',
      layout: CoreDescriptionCardLayout.vertical,
      rowWeight: CoreDescriptionCardRowWeight.labelProminent,
      rows: [
        DescriptionRow(label: 'Species', value: 'Monstera Deliciosa'),
        DescriptionRow(label: 'Watering', value: 'Every 7 days'),
        DescriptionRow(label: 'Light', value: 'Indirect bright light'),
        DescriptionRow(label: 'Temperature', value: '18°C – 27°C'),
      ],
    );
  }
}

class DescriptionCardVerticalExample extends StatelessWidget {
  const DescriptionCardVerticalExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const DescriptionCard(
      title: 'Plant Care',
      layout: CoreDescriptionCardLayout.vertical,
      rowWeight: CoreDescriptionCardRowWeight.labelProminent,
      rows: [
        DescriptionRow(label: 'Species', value: 'Monstera Deliciosa'),
        DescriptionRow(label: 'Watering', value: 'Every 7 days'),
        DescriptionRow(label: 'Light', value: 'Indirect bright light'),
        DescriptionRow(label: 'Temperature', value: '18°C – 27°C'),
      ],
    );
  }
}

space-between

Web

Product

AirPods Pro 2

Brand

Apple

Price

$369.00

Stock

Flutter

Loading Flutter...

class DescriptionCardSpaceBetweenExample extends StatelessComponent {
  const DescriptionCardSpaceBetweenExample({super.key});

  @override
  Component build(BuildContext context) {
    return const DescriptionCard(
      alignment: CoreDescriptionCardAlignment.spaceBetween,
      showRowDividers: true,
      rows: [
        DescriptionRow(label: 'Product', value: 'AirPods Pro 2'),
        DescriptionRow(label: 'Brand', value: 'Apple'),
        DescriptionRow(label: 'Price', value: r'$369.00'),
        DescriptionRow(label: 'Stock', value: '12'),
      ],
    );
  }
}

class DescriptionCardSpaceBetweenExample extends StatelessWidget {
  const DescriptionCardSpaceBetweenExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const DescriptionCard(
      alignment: CoreDescriptionCardAlignment.spaceBetween,
      showRowDividers: true,
      rows: [
        DescriptionRow(label: 'Product', value: 'AirPods Pro 2'),
        DescriptionRow(label: 'Brand', value: 'Apple'),
        DescriptionRow(label: 'Price', value: '$369.00'),
        DescriptionRow(label: 'Stock', value: '12'),
      ],
    );
  }
}

placeholder

Web

Empty Rows

Name

Hong Gildong

Phone

Not provided

Address

Seoul, Gangnam-gu

Flutter

Loading Flutter...

class DescriptionCardPlaceholderExample extends StatelessComponent {
  const DescriptionCardPlaceholderExample({super.key});

  @override
  Component build(BuildContext context) {
    return const DescriptionCard(
      title: 'Empty Rows',
      emptyValueBehavior: CoreDescriptionCardEmptyBehavior.placeholder,
      emptyPlaceholder: 'Not provided',
      rows: [
        DescriptionRow(label: 'Name', value: 'Hong Gildong'),
        DescriptionRow(label: 'Phone'),
        DescriptionRow(label: 'Email'),
        DescriptionRow(label: 'Address', value: 'Seoul, Gangnam-gu'),
      ],
    );
  }
}

class DescriptionCardPlaceholderExample extends StatelessWidget {
  const DescriptionCardPlaceholderExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const DescriptionCard(
      title: 'Empty Rows',
      emptyValueBehavior: CoreDescriptionCardEmptyBehavior.placeholder,
      emptyPlaceholder: 'Not provided',
      rows: [
        DescriptionRow(label: 'Name', value: 'Hong Gildong'),
        DescriptionRow(label: 'Phone'),
        DescriptionRow(label: 'Email'),
        DescriptionRow(label: 'Address', value: 'Seoul, Gangnam-gu'),
      ],
    );
  }
}

When to Use#

Use this component:

Listing detail facts as label/value pairs
Showing structured metadata (order, profile, vehicle history, …)
Emphasising a totals/score row (isEmphasized: true)
Adding a footer action area (bottomAction)

Use a different component:

Table for many records that need sorting/comparison
Stat for a single KPI value
Card for free-form layout

Props#