---
name: atomic-example-product-card
description: Example decomposition for generating a Product Card with Atomic Bomb.
---

# Example: Product Card

User request:

```text
Create a Product Card.
```

## Decomposition

Atoms:

- Image
- Heading
- Paragraph
- Price
- Button

Molecules:

- ProductMedia
- ProductSummary
- ProductActions

Organism:

- ProductCard

## Commands

```shell
npx atomic-bomb --type atom --name Image,Heading,Paragraph,Price,Button
npx atomic-bomb --type molecule --name ProductMedia,ProductSummary,ProductActions
npx atomic-bomb --type organism --name ProductCard
```

## Done Criteria

- ProductCard receives typed product props.
- ProductCard does not fetch product data.
- Price formatting is outside display atoms.
- Storybook includes long product names and missing image states.