# Shadcn Image Shadow Fade

> Full card with image and shadow fade effect

- Type: example, free and open source (MIT)
- Component: [Card](https://reui.io/components/card.md)
- Page: https://reui.io/components/card/c-card-10
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/card.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/card.md
- MCP: `get_example("c-card-10")`
- Registry item: https://reui.io/r/styles/base-nova/c-card-10.json
- Uses: Badge, Card

## Best for

A tall photo with dark fades top and bottom and an author row of verified avatar, email and New badge over it

## Agent notes

- The `AvatarImage` alt reads James Brown and the fallback JB while the name link says Nick Johnson; make all 3 match
- `CustomBadge` is a hardcoded blue verified tick with no text alternative; render it only for verified authors

## When not to use

- A photo tile with only a title and one line over a bottom fade: use [Image Hover Zoom](https://reui.io/components/card/c-card-8.md) (`get_example("c-card-8")`)

## Install

```bash
npx shadcn@latest add @reui/c-card-10
```

## About Shadcn Card

### When to use

- Titled sections with body copy and footer actions, such as a help notice or a sign in form
- Image tiles with a photo above the copy or filling the tile under a dark text overlay
- Dashboard widgets such as a KPI with a trend, a usage meter or a deployment or integration status

### When not to use

- A finished grid of KPI tiles, feature links or profile records ready to drop in: use the [Card blocks](https://reui.io/blocks/application/card.md)
- A KPI panel with a range filter, a segmented meter or an activity feed beneath it: use the [Stats blocks](https://reui.io/blocks/application/stats.md)
- A preview that pops up over a link while the pointer rests on it: use [Hover Card](https://reui.io/components/hover-card.md) (`get_component("hover-card")`)

### Agent notes

- Each example caps `Card` with `max-w-xs`, `max-w-sm` or `max-w-md`; drop the cap when the card should fill a grid cell or column
- `size` sm on `Card` tightens padding and gaps in every style; none of these examples sets it, so try it before padding overrides

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.