WCard

A utility-first card widget that wraps Flutter's Card, adding elevation, shadow, border, and padding through Wind className utilities.

Basic Usage
Constructor
Props
Supported Utility Classes
Styling Examples
WCard vs WContainer
Related Documentation

WCard(
  className: 'bg-white shadow-lg rounded-lg p-4 dark:bg-gray-800',
  child: WText('Card Content', className: 'text-gray-800 dark:text-gray-100'),
);

Basic Usage

WCard wraps a single child and applies Wind utilities for background color, elevation/shadow, border, border radius, and padding. Use it when you want a card surface; for a plain styled box use WContainer.

WCard(
  className: 'bg-white shadow-lg rounded-lg p-4 dark:bg-gray-800',
  child: WText('This is a card.', className: 'text-gray-800 dark:text-gray-100'),
);

Constructor

WCard({
  Key? key,
  dynamic className = '',
  Color? color,
  Color? shadowColor,
  Color? surfaceTintColor,
  double? elevation,
  ShapeBorder? shape,
  bool borderOnForeground = true,
  EdgeInsetsGeometry? margin,
  Clip? clipBehavior,
  Widget? child,
  bool semanticContainer = true,
});

Props

Prop	Type	Default	Description
`className`	`dynamic`	`''`	Wind utility class string applied to the card.
`color`	`Color?`	`null`	Card background color; overrides any `bg-*` utility.
`shadowColor`	`Color?`	`null`	Color of the drop shadow cast below the card.
`surfaceTintColor`	`Color?`	`null`	Surface tint overlay color applied at elevation.
`elevation`	`double?`	`null`	Card elevation; overrides any `shadow-*` utility.
`shape`	`ShapeBorder?`	`null`	Card shape and border; overrides utility-driven border and radius.
`borderOnForeground`	`bool`	`true`	Whether the shape border is painted in front of the child.
`margin`	`EdgeInsetsGeometry?`	`null`	Outer margin; overrides any `m-*` utility.
`clipBehavior`	`Clip?`	`null`	How the card content is clipped.
`child`	`Widget?`	`null`	The single widget wrapped by the card.
`semanticContainer`	`bool`	`true`	Whether the card is treated as a single semantic boundary.

Supported Utility Classes

Class Type	Example	Documentation
Responsive Design	`sm:p-4`, `xs:mt-2`	Responsive Design
Flex-x	`flex-1`, `flex-3`	Flex-x
Flex Fit Classes	`flex-grow`, `flex-auto`	Flex Fit Classes
Alignment	`alignment-top-left`	Alignment
Padding	`p-4`, `p-[11]`	Padding
Margin	`m-8`, `m-[4]`	Margin
Width	`w-10`, `w-[30]`	Width
Height	`h-10`, `h-[30]`	Height
Max-Width & Min-Width	`max-w-10`, `min-w-10`	Max-Width & Min-Width
Max-Height & Min-Height	`max-h-10`, `min-h-10`	Max-Height & Min-Height
Background Color	`bg-red-500`, `bg-green`	Background Color
Border Width	`border-4`, `border-[6]`	Border Width
Border Color	`border-red-500`, `border-[#1abc9c]`	Border Color
Border Radius	`rounded-lg`, `rounded-full`	Border Radius
Shadow	`shadow-sm`, `shadow-lg`	Shadow
Display Classes	`hide`, `show`, `sm:hide`	Display

Styling Examples

An elevated, padded card:

WCard(
  className: 'bg-white shadow-lg rounded-lg p-4 dark:bg-gray-800',
  child: WText('Elevated card', className: 'text-gray-800 dark:text-gray-100'),
);

A bordered, flat card:

WCard(
  className: 'bg-white border-2 border-gray-200 rounded-lg p-4 dark:bg-gray-900 dark:border-gray-700',
  child: WText('Flat bordered card', className: 'text-gray-700 dark:text-gray-200'),
);

WCard vs WContainer

WCard is purpose-built for cards: it exposes elevation, shadowColor, and surfaceTintColor, which WContainer does not. WContainer is a general-purpose styled box. Reach for WContainer when you need a plain styled container, and WCard when you need a card surface with elevation and shadow.

WContainer — general-purpose styled box.
WText — utility-styled text for card children.
Shadow — shadow utilities used for elevation.
Border Radius — corner rounding utilities.