---
title: 'Card'
description: '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:

![Basic Card](/images/card/card.png)

```dart
HuxCard(
  title: 'Card Title',
  child: Text('Card content goes here'),
)
```

### Card with Subtitle
Card with additional subtitle text:

![Card with Subtitle](/images/card/card-subtitle.png)

```dart
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:

![Card with Action](/images/card/card-action.png)

```dart
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
HuxCard(
  title: 'View Analytics',
  child: Text('Tap to see detailed performance metrics'),
  onTap: () => _navigateToAnalytics(),
)
```

### Nested Cards
Card containing other cards:
```dart
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
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>
