# Hero — with media

> A landing page hero with centred text over a full-width background image, or above a framed screenshot. Over a background, a dark layer keeps the text readable.

Facade UI item `hero-with-media` (block, section).
Docs page: https://facadeui.dev/components/hero-with-media · Registry JSON: https://facadeui.dev/r/hero-with-media.json

## Install

```bash
npx shadcn@latest add @facade/hero-with-media
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/hero-with-media.json`. The CLI also installs what it needs: @facade/container, @facade/cta-group, @facade/eyebrow, @facade/heading, @facade/section, @facade/types, @facade/utils.

Files: `components/sections/hero-with-media.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/hero-with-media-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { HeroWithMedia } from "@/components/sections/hero-with-media"

import { ACTIONS } from "./content"

export function Demo() {
  return (
    <HeroWithMedia
      eyebrow="Overlay"
      title="Copy over media, with contrast guaranteed"
      description="The scrim is always painted, because text over an arbitrary image has no predictable contrast ratio."
      actions={ACTIONS}
      headingLevel={1}
      spacing="md"
      // Decorative: it carries nothing the copy does not already say.
      media={
        <div
          role="presentation"
          className="size-full bg-[radial-gradient(circle_at_20%_20%,#3b4a6b,transparent_55%),radial-gradient(circle_at_80%_30%,#6b3b5a,transparent_50%),linear-gradient(140deg,#11151f,#2a2140)]"
        />
      }
    />
  )
}
```

## Props

### HeroWithMediaProps

Extends StackSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `string` |  |  |
| `description` | `string` |  |  |
| `eyebrow` | `ReactNode` |  |  |
| `actions` | `CtaItem[]` |  |  |
| `link` | `LinkComponent` |  |  |
| `note` | `ReactNode` |  |  |
| `media` (required) | `ReactNode` |  | The media. In `overlay` mode it is decorative, so give it `alt=""`. |
| `placement` | `"overlay" \| "below"` | `"overlay"` | `overlay` puts media behind the copy; `below` puts it underneath. |
| `overlayClassName` | `string` |  | Classes for the dark layer between the media and the text. |
| `headingLevel` | `HeadingLevel` | `1` |  |
| `size` | `"md" \| "lg" \| "xl"` | `"lg"` |  |
| `as` | `"section" \| "div"` | `"div"` |  |
| `spacing` | `"sm" \| "md" \| "lg" \| "none"` | `"lg"` |  |
| `className` | `string` |  |  |
| `id` | `string` |  |  |