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

# EquaCard

> Design system reference for EquaCard, including Storybook, Figma, screenshots, and usage guidance

# EquaCard

> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaCard.stories.tsx`, Line: 8

## Purpose

Reusable content containers with header, body, footer, and action regions.

## Storybook

| Story                      | Reference                                                                             |
| -------------------------- | ------------------------------------------------------------------------------------- |
| Default                    | [Storybook](http://localhost:6006/?path=/story/equa-card--default)                    |
| With Header                | [Storybook](http://localhost:6006/?path=/story/equa-card--with-header)                |
| With Header And Footer     | [Storybook](http://localhost:6006/?path=/story/equa-card--with-header-and-footer)     |
| Clickable Card             | [Storybook](http://localhost:6006/?path=/story/equa-card--clickable-card)             |
| With Title And Description | [Storybook](http://localhost:6006/?path=/story/equa-card--with-title-and-description) |
| Data Card                  | [Storybook](http://localhost:6006/?path=/story/equa-card--data-card)                  |
| Holdings Card              | [Storybook](http://localhost:6006/?path=/story/equa-card--holdings-card)              |
| Profile Card               | [Storybook](http://localhost:6006/?path=/story/equa-card--profile-card)               |
| Card Grid                  | [Storybook](http://localhost:6006/?path=/story/equa-card--card-grid)                  |
| All Variants               | [Storybook](http://localhost:6006/?path=/story/equa-card--all-variants)               |
| Stat Card                  | [Storybook](http://localhost:6006/?path=/story/equa-card--stat-card)                  |
| Gateway Status Card        | [Storybook](http://localhost:6006/?path=/story/equa-card--gateway-status-card)        |

## API And Props

| Prop or Control | Source            | Notes                                |
| --------------- | ----------------- | ------------------------------------ |
| `noPadding`     | Storybook control | See source story for accepted values |

Sources:

* `equa-patternlib-nextjs/src/components/card/card.tsx`, Line: 5
* `equa-patternlib-nextjs/src/components/card/index.ts`
* `equa-patternlib-nextjs/stories/EquaCard.stories.tsx`, Line: 8

## Figma

UNVERIFIED -- requires Figma node assignment

## Screenshots

| State           | Asset                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Equa dark theme | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-card/equa-card--all-variants-equa.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=8da8108d8ac2d362de5bddaab9f207a4" alt="EquaCard dark theme" width="1366" height="900" data-path="images/design-system/components/equa-card/equa-card--all-variants-equa.png" />          |
| Light theme     | <img src="https://mintcdn.com/equainc/WF4vvyO1PBrsp7n_/images/design-system/components/equa-card/equa-card--all-variants-light.png?fit=max&auto=format&n=WF4vvyO1PBrsp7n_&q=85&s=c328d031b6c2fd659f247f4198152ce0" alt="EquaCard light theme" width="1366" height="900" data-path="images/design-system/components/equa-card/equa-card--all-variants-light.png" /> |

## Usage Notes

* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).

## Accessibility Notes

* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.