# Image overlay

> Text and a CTA over a gradient-darkened cover image.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/card-13).

- Page, with a live preview: https://shadcn.exchange/r/flx/card-13
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/card-13-light-4a63055b45658587.png
- Registry item: https://ui.flexnative.com/r/card-13.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/card-13.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `button`, `badge`

## Files

### `registry/patterns/card/card-13.tsx`

```tsx
import { ArrowRightIcon } from 'lucide-react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

export function Card13() {
  return (
    <Card className="relative w-full max-w-sm border-0 py-0 text-white">
      <img
        src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=640&q=80"
        alt="Sunlit mountain ridge"
        className="aspect-[4/5] object-cover"
      />
      <div className="absolute inset-0 rounded-xl bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
      <div className="absolute inset-x-0 bottom-0 flex flex-col gap-2 p-6">
        <Badge variant="secondary" className="w-fit">
          Featured
        </Badge>
        <h3 className="font-heading text-xl font-semibold">
          Into the wild
        </h3>
        <p className="text-sm text-white/80">
          A photo series capturing dawn across remote alpine trails.
        </p>
        <Button
          variant="secondary"
          size="sm"
          className="mt-2 w-fit"
        >
          Explore
          <ArrowRightIcon data-icon="inline-end" />
        </Button>
      </div>
    </Card>
  )
}
```