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

# Card

> Flexible card component with headers, actions, and tap handling

## Overview

`HuxCard` provides a flexible container component for displaying content with optional headers, titles, and actions.

## Component Variants

### Basic Card

Simple card with title and content:

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/card/card.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=7ed628b9e15609aea918722bbc6d72a3" alt="Basic Card" width="1200" height="360" data-path="images/card/card.png" />

```dart theme={null}
HuxCard(
  title: 'Card Title',
  child: Text('Card content goes here'),
)
```

### Card with Subtitle

Card with additional subtitle text:

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/card/card-subtitle.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=b848f34d13a2627fbae1cf3bece0cfa2" alt="Card with Subtitle" width="1200" height="360" data-path="images/card/card-subtitle.png" />

```dart theme={null}
HuxCard(
  title: 'Design System Update',
  subtitle: 'Version 2.1.0 • 2 hours ago',
  child: Text('New components and improved accessibility features'),
)
```

### Card with Action

Card with action button in header:

<img src="https://mintcdn.com/thehuxdesign/81AtyNkpXR7HVLTv/images/card/card-action.png?fit=max&auto=format&n=81AtyNkpXR7HVLTv&q=85&s=94b242cc3b06394943f6a71be7bc4bf8" alt="Card with Action" width="1200" height="360" data-path="images/card/card-action.png" />

```dart theme={null}
HuxCard(
  title: 'Project Dashboard',
  action: IconButton(
    icon: Icon(FeatherIcons.moreVertical),
    onPressed: () => _showProjectMenu(),
  ),
  child: Text('View project analytics and team performance'),
)
```

### Interactive Card

Card with tap handling:

```dart theme={null}
HuxCard(
  title: 'View Analytics',
  child: Text('Tap to see detailed performance metrics'),
  onTap: () => _navigateToAnalytics(),
)
```

### Nested Cards

Card containing other cards:

```dart theme={null}
HuxCard(
  title: 'Parent Card',
  child: Column(
    children: [
      HuxCard(
        title: 'Child Card 1',
        child: Text('Nested content'),
      ),
      HuxCard(
        title: 'Child Card 2',
        child: Text('More nested content'),
      ),
    ],
  ),
)
```

## Basic Usage

## With Actions

```dart theme={null}
HuxCard(
  title: 'Settings',
  action: IconButton(
    icon: Icon(FeatherIcons.settings),
    onPressed: () {},
  ),
  child: Text('Configure your preferences'),
  onTap: () => print('Card tapped'),
)
```

## Properties

* `title` - Card title text
* `subtitle` - Optional subtitle text
* `action` - Optional action widget (usually IconButton)
* `child` - Main content widget
* `onTap` - Tap handler for the entire card

<Note>
  Complete HuxCard documentation is coming soon. See the [example app](https://github.com/lofidesigner/hux/tree/main/example) for more usage patterns.
</Note>