Layout

Media banner

Full-width, fixed-height media frame for a full-bleed banner image or video between sections.

Install

npx shadcn@latest add @alix/mediaBanner

Preview

Usage

<MediaBanner height="sm">
  <img src="/banner.jpg" alt="" className="size-full object-cover" />
</MediaBanner>

Examples

The height scale

Width stays fluid; height steps through the scale, so a strip keeps its set height regardless of how wide the viewport gets.

height="sm"

height="md"

<MediaBanner height="sm">
  <img src="/media/grey-arc.svg" alt="" className="size-full object-cover" />
</MediaBanner>
<MediaBanner height="md">
  <img src="/media/grey-arc.svg" alt="" className="size-full object-cover" />
</MediaBanner>

A caption over the banner

The relative frame clips a stacked overlay — a navy scrim plus a heading — so a full-bleed strip can carry a line of copy.

Senior-led delivery, from the first assessment to the final handover.

<MediaBanner height="md">
  <img src="/banner.jpg" alt="" className="size-full object-cover" />
  <div className="absolute inset-0 flex items-end bg-gradient-to-t from-[#1b3644]/80 to-transparent p-8">
    <p className="max-w-md text-2xl font-medium text-white">
      Senior-led delivery, from the first assessment to the final handover.
    </p>
  </div>
</MediaBanner>

As a semantic figure

When the banner carries meaning, render it as a <figure> so a caption reads as one associated unit.

Aerial view of the harbour district at dawn

<MediaBanner height="sm" render={<figure />}>
  <img
    src="/banner.jpg"
    alt="Aerial view of the harbour district at dawn"
    className="size-full object-cover"
  />
</MediaBanner>

When to use it

Use it for

A full-bleed image or video strip between sections that must hold a fixed height as the viewport widens.
A banner with an overlaid heading or scrim — the relative frame clips the stacked layer for you.
Parallax-ready hero strips, where an oversized scroll-translated inner layer stays clipped to the frame.

Reach for something else

Framing media to a fixed shape rather than a fixed height — use AspectRatio.
A CMS-driven banner section with title and actions — use MediaBannerBlock, which composes this behind a data contract.
Capping content measure — that is Container.

Props

Prop	Type	Default	Description
height	"none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Fixed banner height from the height scale; width stays fluid.
children	ReactNode	—	Media slot — pass a real <img> or <video>; give it size-full object-cover to fill the frame.
render	ReactElement	—	Renders as a different element (e.g. <section /> or <figure />) when the banner carries meaning.