> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Card

> A clean container widget with subtle shadows and borders, perfect for grouping related content and creating visual hierarchy.

## Example

<Frame caption="Stats card for a dashboard.">
  <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/card/card_basic_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=00023e2de81386d3092e10e9b1aa5cd5" alt="Basic card example" noZoom className="block dark:hidden" width="1536" height="512" data-path="images/widgets/utilities/card/card_basic_light.png" />

  <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/card/card_basic_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=31438efbd9b8057ffd14dd844b5b7ff9" alt="Basic card example" noZoom className="hidden dark:block" width="1536" height="512" data-path="images/widgets/utilities/card/card_basic_dark.png" />
</Frame>

<CodeGroup>
  ```dart Dashboard Stats Card lines focus={1-2, 40} theme={null}
  NeoCard(
    child: Column(
      crossAxisAlignment: .start,
      mainAxisSize: .min,
      children: [
        Row(
          mainAxisSize: .min,
          children: [
            PhosphorIcon(
              PhosphorIconsRegular.shoppingCart,
              color: theme.colors.fgSecondary,
              size: 22,
            ),
            Gap(theme.spacings.small),
            Text(
              "Orders",
              style: theme.textStyles.label.copyWith(
                color: theme.colors.fgSecondary,
              ),
            ),
          ],
        ),
        Gap(theme.spacings.medium),
        Text(
          "1,898",
          style: theme.textStyles.header1.copyWith(
            color: theme.colors.fgPrimary,
            fontSize: 36,
          ),
        ),
        Gap(theme.spacings.small),
        NeoBadge(
          label: "+12% from last month",
          icon: PhosphorIcons.arrowUp,
          color: theme.colors.success,
          isPill: true,
        ),
      ],
    ),
  ),
  ```
</CodeGroup>

## Properties

### Required

<ParamField path="child" type="Widget" required>
  The content to display inside the card.
</ParamField>

### Layout

<ParamField path="padding" type="EdgeInsetsGeometry?" default="theme.spacings.large">
  Custom padding inside the card.
</ParamField>

## Best Practices

* **Group related content**: Use cards to visually group related information and create clear content boundaries
* **Use consistent padding**: Stick with default padding or use theme spacing values for consistency
* **Consider content hierarchy**: Use appropriate text styles and spacing within cards
* **Avoid nesting cards**: Generally avoid placing cards inside other cards to prevent visual complexity

## Integration Notes

* **Flexible content**: Works with any widget as child content