DescriptionCard

Label/value metadata summary card

DescriptionCard#

CoDescriptionCard 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 CoDescriptionCard(
      title: 'Order Detail',
      rows: [
        CoDescriptionRow(label: 'Order', value: 'ORD-2025-00391'),
        CoDescriptionRow(label: 'Item', value: 'AirPods Pro 2'),
        CoDescriptionRow(label: 'Total', value: r'$369.00', isEmphasized: true),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoDescriptionCard(
      title: 'Order Detail',
      rows: [
        CoDescriptionRow(label: 'Order', value: 'ORD-2025-00391'),
        CoDescriptionRow(label: 'Item', value: 'AirPods Pro 2'),
        CoDescriptionRow(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 CoDescriptionCard(
      title: 'Profile',
      variant: CoreDescriptionCardVariant.filled,
      rows: [
        CoDescriptionRow(label: 'Name', value: 'Hong Gildong'),
        CoDescriptionRow(label: 'Email', value: 'hong@example.com'),
        CoDescriptionRow(label: 'Phone', value: '010-1234-5678'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoDescriptionCard(
      title: 'Profile',
      variant: CoreDescriptionCardVariant.filled,
      rows: [
        CoDescriptionRow(label: 'Name', value: 'Hong Gildong'),
        CoDescriptionRow(label: 'Email', value: 'hong@example.com'),
        CoDescriptionRow(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 CoDescriptionCard(
      variant: CoreDescriptionCardVariant.ghost,
      rows: [
        CoDescriptionRow(label: 'Name', value: 'Kim Cheolsu'),
        CoDescriptionRow(label: 'Email', value: 'kim@example.com'),
        CoDescriptionRow(label: 'Phone', value: '010-1234-5678'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoDescriptionCard(
      variant: CoreDescriptionCardVariant.ghost,
      rows: [
        CoDescriptionRow(label: 'Name', value: 'Kim Cheolsu'),
        CoDescriptionRow(label: 'Email', value: 'kim@example.com'),
        CoDescriptionRow(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 CoDescriptionCard(
      title: 'Plant Care',
      layout: CoreDescriptionCardLayout.vertical,
      rowWeight: CoreDescriptionCardRowWeight.labelProminent,
      rows: [
        CoDescriptionRow(label: 'Species', value: 'Monstera Deliciosa'),
        CoDescriptionRow(label: 'Watering', value: 'Every 7 days'),
        CoDescriptionRow(label: 'Light', value: 'Indirect bright light'),
        CoDescriptionRow(label: 'Temperature', value: '18°C – 27°C'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoDescriptionCard(
      title: 'Plant Care',
      layout: CoreDescriptionCardLayout.vertical,
      rowWeight: CoreDescriptionCardRowWeight.labelProminent,
      rows: [
        CoDescriptionRow(label: 'Species', value: 'Monstera Deliciosa'),
        CoDescriptionRow(label: 'Watering', value: 'Every 7 days'),
        CoDescriptionRow(label: 'Light', value: 'Indirect bright light'),
        CoDescriptionRow(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 CoDescriptionCard(
      alignment: CoreDescriptionCardAlignment.spaceBetween,
      showRowDividers: true,
      rows: [
        CoDescriptionRow(label: 'Product', value: 'AirPods Pro 2'),
        CoDescriptionRow(label: 'Brand', value: 'Apple'),
        CoDescriptionRow(label: 'Price', value: r'$369.00'),
        CoDescriptionRow(label: 'Stock', value: '12'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoDescriptionCard(
      alignment: CoreDescriptionCardAlignment.spaceBetween,
      showRowDividers: true,
      rows: [
        CoDescriptionRow(label: 'Product', value: 'AirPods Pro 2'),
        CoDescriptionRow(label: 'Brand', value: 'Apple'),
        CoDescriptionRow(label: 'Price', value: '$369.00'),
        CoDescriptionRow(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 CoDescriptionCard(
      title: 'Empty Rows',
      emptyValueBehavior: CoreDescriptionCardEmptyBehavior.placeholder,
      emptyPlaceholder: 'Not provided',
      rows: [
        CoDescriptionRow(label: 'Name', value: 'Hong Gildong'),
        CoDescriptionRow(label: 'Phone'),
        CoDescriptionRow(label: 'Email'),
        CoDescriptionRow(label: 'Address', value: 'Seoul, Gangnam-gu'),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoDescriptionCard(
      title: 'Empty Rows',
      emptyValueBehavior: CoreDescriptionCardEmptyBehavior.placeholder,
      emptyPlaceholder: 'Not provided',
      rows: [
        CoDescriptionRow(label: 'Name', value: 'Hong Gildong'),
        CoDescriptionRow(label: 'Phone'),
        CoDescriptionRow(label: 'Email'),
        CoDescriptionRow(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#

`CoDescriptionCard`#

Prop	Type	Default	Description
`rows`	`List<CoDescriptionRow>`	required	Row data list
`size`	`CoreDescriptionCardSize`	`md`	Card size scale (xs/sm/md/lg/xl)
`layout`	`CoreDescriptionCardLayout`	`horizontal`	Row layout direction
`variant`	`CoreDescriptionCardVariant`	`outlined`	Card style (filled/outlined/ghost)
`title`	`String?`	`null`	Optional title text
`titleLeading`	`Widget?` / `Component?`	`null`	Widget rendered before the title
`titleTrailing`	`Widget?` / `Component?`	`null`	Widget rendered after the title
`showDivider`	`bool`	`true`	Draw divider below the title
`showRowDividers`	`bool`	`false`	Draw dividers between rows
`bottomAction`	`Widget?` / `Component?`	`null`	Bottom action area
`showBottomActionDivider`	`bool`	`true`	Draw divider above the bottom action
`alignment`	`CoreDescriptionCardAlignment`	`fixed`	Horizontal alignment (`fixed` or `spaceBetween`)
`valueOverflow`	`CoreDescriptionCardOverflow`	`wrap`	Long-value handling (`wrap` or `ellipsis`)
`rowWeight`	`CoreDescriptionCardRowWeight`	`valueProminent`	Default emphasis direction
`emptyValueBehavior`	`CoreDescriptionCardEmptyBehavior`	`hide`	Null-row handling (`hide` or `placeholder`)
`emptyPlaceholder`	`String`	`'-'`	Placeholder text for null rows
`emphasisStyle`	`CoDescriptionEmphasisStyle?`	`null`	Style applied to `isEmphasized` rows
`onTap`	`VoidCallback?`	`null`	Card tap callback
`padding`	`EdgeInsetsGeometry?` (Flutter) / `double?` (Web)	`null`	Padding override
`borderRadius`	`BorderRadiusGeometry?` (Flutter) / `double?` (Web)	`null`	Border radius override
`backgroundColor`	`Color?` (Flutter) / `String?` (Web)	`null`	Background color override
`borderColor`	`Color?` (Flutter) / `String?` (Web)	`null`	Border color override
`borderWidth`	`double?`	`null`	Border width override
`boxShadow`	`List<BoxShadow>?` (Flutter) / `String?` (Web)	`null`	Shadow override

`CoDescriptionRow`#

Prop	Type	Default	Description
`label`	`String`	required	Row label
`value`	`String?`	`null`	Row value
`valueWidget`	`Widget?` / `Component?`	`null`	Custom value widget — wins over `value`
`leading`	`Widget?` / `Component?`	`null`	Widget rendered before the label
`trailing`	`Widget?` / `Component?`	`null`	Widget rendered after the value
`onTap`	`VoidCallback?`	`null`	Row tap callback
`style`	`CoDescriptionRowStyle?`	`null`	Per-row style override
`isEmphasized`	`bool`	`false`	Apply `emphasisStyle` to this row

`CoDescriptionEmphasisStyle`#

Prop	Type	Description
`labelColor`	`Color?` (Flutter) / `String?` (Web)	Emphasised label color
`valueColor`	`Color?` (Flutter) / `String?` (Web)	Emphasised value color
`labelFontWeight`	`FontWeight?` (Flutter) / `String?` (Web)	Emphasised label font weight
`valueFontWeight`	`FontWeight?` (Flutter) / `String?` (Web)	Emphasised value font weight

Customization Layers#

CoDescriptionCard overrides flow through three layers:

Theme — register a CoreDescriptionCardTheme on CoreComponentTheme for project-wide defaults (padding, radius, label/value colors, …).
Variant + size + layout — declarative knobs (filled/outlined/ghost, xs–xl, horizontal/vertical, etc.).
Instance — backgroundColor, borderColor, borderRadius, boxShadow, etc. set on the widget.

Cross-platform Notes#

Concern	Flutter	Web
Row data class	`CoDescriptionRow`	`CoDescriptionRow`
Emphasis style class	`CoDescriptionEmphasisStyle`	`CoDescriptionEmphasisStyle`
Color override type	`Color`	CSS color string (rgba/hex)
Padding/radius override	`EdgeInsetsGeometry` / `BorderRadiusGeometry`	`double` (px)
Box shadow override	`List<BoxShadow>`	CSS box-shadow string
Row `onTap`	✅	✅
Custom value widget	✅	✅

DescriptionCard

DescriptionCard#

Live Preview#

When to Use#

Props#

CoDescriptionCard#

CoDescriptionRow#

CoDescriptionEmphasisStyle#

Customization Layers#

Cross-platform Notes#

Related#

`CoDescriptionCard`#

`CoDescriptionRow`#

`CoDescriptionEmphasisStyle`#