Cards

CDX UI ships section, list, hero, and metric card primitives. CompactCard, HeroCard, StatTile, and StatGrid are exported from the main vyuh_cdx_ui barrel. SectionCard intentionally lives in vyuh_cdx_ui/cards.dart so higher-level packages can import it without barrel-level naming conflicts.

Live examples

Open the full Cards and Layout example.

import 'package:vyuh_cdx_ui/vyuh_cdx_ui.dart';
import 'package:vyuh_cdx_ui/cards.dart' show SectionCard;

SectionCard

A consistent grouping card with an icon + title header and an arbitrary body. Used everywhere a feature surface needs a labeled section (detail panels, dashboard widgets, settings groups).

SectionCard(
  icon: FluentIcons.building_factory_24_regular,
  title: 'Production Areas',
  trailing: Button.icon(
    icon: FluentIcons.add_24_regular,
    tooltip: 'Add area',
    onPressed: () async => editor.openCreate(),
  ),
  child: Column(children: areas.map((a) => _AreaRow(a)).toList()),
)

SectionCard.stateful

Drop-in variant that handles loading / error / empty / content states inline — no AsyncView wrapper needed when the host card already owns the chrome.

SectionCard.stateful(
  icon: FluentIcons.timeline_24_regular,
  title: 'Recent activity',
  isLoading: store.isLoading,
  error: store.error,
  onRetry: store.refresh,
  isEmpty: store.items.isEmpty,
  emptyMessage: 'No activity yet',
  child: ActivityList(items: store.items),
)

State priority: isLoading > error > isEmpty > child.

Param	Type
icon	IconData
title	String
child	Widget
trailing	Widget?
iconColor	Color?
backgroundColor	Color? (defaults to surfaceContainer)
padding	EdgeInsetsGeometry? (defaults to containerPadding)

CompactCard

Low-profile card for list items and summary rows. Has leading / trailing / content / footer slots and an optional isActive opacity dimming.

CompactCard(
  title: 'Packing Line 1',
  subtitle: 'Capacity: 12',
  leading: const Icon(FluentIcons.building_factory_24_regular),
  trailing: Button.icon(icon: FluentIcons.more_horizontal_24_regular, ...),
  content: const [
    StatusBadge.primary(label: 'Active', icon: FluentIcons.checkmark_24_regular),
  ],
  isActive: area.isActive, // true → full opacity, false → 0.6, null → no animation
  onTap: () => navigator.push(area),
)

Slots

Slot	Position
leading	Before title
title	Bold heading
trailing	After title (Switch, action button)
subtitle	Below title row
content	Additional widgets below subtitle (badges, metadata rows)
footer	Pushed to bottom-right of card (requires bounded card height)

HeroCard

Prominent card for visual selection contexts — industry pickers, theme chooser, dashboard previews. Centered hero icon + title + optional subtitle, with a checkmark badge on isSelected.

HeroCard(
  icon: FluentIcons.factory_24_regular,
  title: 'Pharmaceutical',
  subtitle: 'GMP, batch records, e-signatures',
  isSelected: industry == Industry.pharma,
  isLoading: store.isApplying,
  onTap: () => store.setIndustry(Industry.pharma),
)

When isSelected is true, a checkmark_circle_24_filled overlay appears at the top-right corner via Stack so the inner content layout stays stable.

StatTile / StatGrid

Compact metric cards for dashboard and detail-summary bands. StatTile renders an icon, uppercase label, prominent value, and optional helper line. StatGrid wraps metric tiles responsively: 4 columns at wide widths, 3, 2, then 1 as the container narrows.

StatGrid(
  children: [
    StatTile(
      icon: FluentIcons.clock_24_regular,
      label: 'Open tasks',
      value: '${stats.openTasks}',
      helper: 'Across all active lots',
    ),
    StatTile(
      icon: FluentIcons.checkmark_circle_24_regular,
      label: 'Completed',
      value: '${stats.completedToday}',
      helper: 'Today',
    ),
  ],
)

Choosing between them

Need	Use
Group a section of content with a header	SectionCard
Async-aware sectioned card with built-in states	SectionCard.stateful
Row-style item in a list	CompactCard
Visual chooser in a grid	HeroCard
Responsive metric strip	StatGrid with StatTile

Cross-links

• State Views — AsyncView for full-page async, SectionCard.stateful for in-card
• Theming — containerPadding, containerBorderRadius
• Badges — StatusBadge rows inside CompactCard.content