> For the complete documentation index, see [llms.txt](https://help.byinspiredlabs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.byinspiredlabs.com/header-group/header/hero-banner-block.md).

# Hero banner block

This block allows you to display a high-impact visual header inside the Header section with optional animated text.

It is designed to provide a visually dominant, brand-defining entry point at the top of the page.

<figure><img src="https://441504973-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0IRrXJZ4YweBmaaR6L8%2Fuploads%2FPj4HpnRA27lNTM9hFh5E%2FScreenshot%202026-04-14%20at%2011.57.16%E2%80%AFAM.png?alt=media&amp;token=04fdade5-5852-44b4-90f4-41df4786ef83" alt=""><figcaption></figcaption></figure>

### Block settings

<figure><img src="https://441504973-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0IRrXJZ4YweBmaaR6L8%2Fuploads%2F7altoDEp1RhluSJSXXJk%2FScreenshot%202026-04-14%20at%2011.59.53%E2%80%AFAM.png?alt=media&amp;token=a3b22b7d-6d93-42dc-a8d7-8fc44b43765d" alt=""><figcaption></figcaption></figure>

1. **Devices:** Determines where the Hero banner block is rendered: desktop only, mobile only, or all devices.
2. **Layout**: Determines the visual layout of the Hero banner based on the selected option:

{% tabs %}
{% tab title="Scrolling text" %}
Used to display dynamic, continuously moving text across the banner.

* **First / Second / Third heading**: Enter text phrases that will loop continuously in sequence.
* **Heading size**: Adjust the font size of the scrolling text.
* **Space between headings**: Controls the spacing between each text phrase.
* **Separator style** *(None, Vertical line, Dot, Diamond, Diamond outline)*: Adds a visual separator between headings.
* **Direction** *(Left / Right)*: Defines the scrolling direction of the text.
* **Speed** *(5s → 100s)*: Controls how fast the text scrolls. Lower values = faster movement.

<figure><img src="https://441504973-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0IRrXJZ4YweBmaaR6L8%2Fuploads%2FBuxhJbyN6rplLGsM6WIQ%2FDesktop%20thumbnail%20(4).png?alt=media&amp;token=abccfc7d-f63c-4b47-8965-228094f5b8de" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo" %}
Ideal for branding-focused banners.

* **Image**: Upload the main logo image displayed on desktop and general devices.
* **Mobile image**: Upload a separate logo optimized for mobile devices.

<figure><img src="https://441504973-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0IRrXJZ4YweBmaaR6L8%2Fuploads%2F8SNltccRrRtvzyVXg1jF%2FDesktop%20thumbnail.png?alt=media&amp;token=ff8d0d28-53b4-42d2-998c-a4c3106c52bf" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Heading" %}
Best for promotional content or key messaging.

* **Heading**: Main title text displayed on the banner.
* **Heading size**: Adjust the size of the heading.
* **Description**: Add supporting text below the heading.
* **Content width** *(200 → 800px)*: Controls the maximum width of the text block.
* **Desktop content position**: Set the position of content on desktop (e.g., Top left, Middle center, Bottom right).
* **Mobile content position**: Adjust content placement specifically for mobile layouts.
* **Button**:
  * **Label**: Enter button text
  * **Style**: Choose between *Solid, Outline, Text*
  * **Link**: Assign a destination URL

<figure><img src="https://441504973-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv0IRrXJZ4YweBmaaR6L8%2Fuploads%2FtoCX4UhmKqWCiZ1cP4n8%2FDesktop%20thumbnail%20(1).png?alt=media&amp;token=efef6cd3-1ab6-4f72-b3c3-e93eb1fbcfa0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

3. **Image & Video**: Select the media banner. Video will override image if both are set.
4. **Image overlay opacity:** Applies a semi-transparent overlay to increase text legibility.
5. **Desktop banner height:** Sets banner height as a percentage of viewport height.
6. **Additional text**: Allows you to display a subtle text overlay on bottom of Hero banner, often used to guide user interaction. This text is **clickable** and, when clicked, will automatically scroll users down to the header section of the page.
7. **Mobile banner height:** Controls viewport-relative banner height on tablet/mobile.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.byinspiredlabs.com/header-group/header/hero-banner-block.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.