# Hero

The hero section is a high-impact banner used at the top of pages to showcase key messaging, promotions, or branding. It supports images or video backgrounds with optional overlays and styling controls to ensure strong visual presence and readability.

<figure><img src="/files/QpEZrRehJy4A4SsJe05h" alt=""><figcaption></figcaption></figure>

#### Style

Defines how the hero content is positioned within the layout. “Flush” creates an edge-to-edge presentation, while “Inline” places content within a contained layout structure.

#### Type

Determines the background media type used for the hero section. Options include color, image, or video.

#### Image desktop

Sets the background image for desktop devices. A 3x2 aspect ratio is recommended. Leave blank to omit.

#### Image mobile

Sets the background image for mobile devices. A 2x3 aspect ratio is recommended. Leave blank to omit.

#### Video

Defines a background video for the hero section. Leave blank to omit.

#### Video poster

Sets a fallback image displayed before the video loads or when video cannot be played. If not set, a default fallback is used.

#### Background overlay

Controls whether a color overlay is applied on top of the background media to improve text readability.

#### Enable overlay

Toggles the background overlay on or off.

#### Overlay strength

Adjusts the intensity of the overlay. Higher values create a darker overlay for improved contrast.

#### Color (foreground)

Sets the text color used for content displayed over the hero background.

#### Color (background)

Defines the fallback background color when no image or video is used.

#### Color (overlay)

Sets the color used for the overlay layer applied on top of background media.

#### Minimum height on desktop

Defines the minimum height of the hero section on desktop, measured as a percentage of the viewport height. Default is 85.

#### Minimum height on mobile

Defines the minimum height of the hero section on mobile, measured as a percentage of the viewport height. Default is 85.

#### Vertical spacing

Controls the spacing around the hero section to adjust its separation from surrounding content.

#### Vertical spacing (desktop)

Sets the vertical spacing applied on desktop devices. Default is Large.

#### Vertical spacing (mobile)

Sets the vertical spacing applied on mobile devices to ensure consistent spacing across screen sizes.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gatame.gitbook.io/highstreet/dynamic-sections/editorial/hero.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.