Full Bleed Hero Safe Area

ProNew

A hero image that runs under the status bar and notch while its title and buttons stay inside the safe area, with a text scrim that keeps contrast and a Back button that is never covered. Use this when a phone detail screen opens with a full-width photo that should reach the top edge of the screen.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

src

alt

title

Guide and examples

When to use it

Use it when a phone detail screen opens with a full-width photo that should reach the top edge of the screen.

Do not use it for pages with a solid header, or hero images carrying text that is part of the image.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`src`	`string`	`required`	The hero image.
`alt`	`string`	`""`	Empty when decorative.
`title`	`string`	`required`	The screen title (h1).
`onBack`	`() => void`	`required`	Back action.

Accessibility

The title is the h1 and sits on a dark gradient scrim so white text keeps at least 4.5:1 contrast on any image.
Back is a 44px button inside the safe area at the start, named "Back".
The image is decorative by default (empty alt); give an alt if it carries information.

Testing

The pattern ships with a Testing Library test (full-bleed-hero-safe-area.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone detail screen opens with a full-width photo that should reach the top edge of the screen.

Do not use it for pages with a solid header, or hero images carrying text that is part of the image.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`src`	`string`	`required`	The hero image.
`alt`	`string`	`""`	Empty when decorative.
`title`	`string`	`required`	The screen title (h1).
`onBack`	`() => void`	`required`	Back action.

Accessibility

The title is the h1 and sits on a dark gradient scrim so white text keeps at least 4.5:1 contrast on any image.
Back is a 44px button inside the safe area at the start, named "Back".
The image is decorative by default (empty alt); give an alt if it carries information.

Testing

The pattern ships with a Testing Library test (full-bleed-hero-safe-area.test.tsx) that drives it through roles and the keyboard.