WCard

The WCard widget in the Wind plugin is a utility-first widget that provides customizable card designs. It simplifies creating cards with background color, shadows, padding, borders, and more using Wind's utility classes.

Supported Utility Classes

The following utility classes can be used with the WCard widget:

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

Example

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

The above example HTML equivalent is:

<div class="bg-white shadow-lg rounded-lg p-4">
  <span class="text-gray-800">Card Content</span>
</div>

WCard vs WContainer

The WCard widget is specifically designed for cards with built-in support for properties like elevation and shadowColor, which are not directly available in WContainer. While WContainer is a general-purpose container widget, WCard provides additional features tailored for creating cards, such as elevation and shape.

Use WContainer when you need a general-purpose styled container, and use WCard when you need a card-specific design with elevation and shadow.