# Hero banner block

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

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

### Block settings

<figure><img src="/files/YT87nfXfo8Z0sqfIXKJ5" 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="/files/1Gy1SyMbcRlsMxSUpVrK" 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="/files/0YmQRF9ZoFDmCjlieFcd" 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="/files/THj7LAdyoq0mt2CMhE6M" 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: 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://help.byinspiredlabs.com/header-group/header/hero-banner-block.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.