> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/media/banner.md).

# Banner

Create a responsive image or video banner with flexible content, overlays, filters, links, and hover effects.

The **Banner** block combines image or video media with flexible promotional content. Use it for campaign artwork, collection features, announcements, editorial imagery, navigation cards, or any visual callout that needs text and actions layered over media.

### 1. What you can do

* Use an image or uploaded video as the banner media
* Choose automatic, portrait, landscape, or square proportions
* Set responsive width and layout controls
* Arrange headings, text, buttons, and other blocks over the media
* Add overlays, filters, rounded corners, and a parallax effect
* Make the complete banner clickable
* Add color, image, or video hover treatments
* Set separate size and inner-content layouts on mobile

### 2. How to add a Banner

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a banner block**

Click **Add block**, then select **Banner**.
{% endstep %}

{% step %}
**Choose your media**

Choose an image or video.
{% endstep %}

{% step %}
**Manage inner content**

Edit, add, remove, or reorder the inner content blocks.
{% endstep %}

{% step %}
**Adjust the settings**

Control the Banner size, content placement, style, and interaction settings.
{% endstep %}

{% step %}
**Preview the result**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

Use these settings to choose the Banner media, size the frame, position inner content, style the media, configure interactions, and adjust spacing. Most controls work like the Image, Video, Group, or Button blocks, so this page lists only Banner-specific settings and points to the related docs for shared behavior.

<details>

<summary>Media</summary>

Choose the background media shown behind the Banner content. Banner media uses the same crop, width, overlay, filter, corner, and parallax patterns as [Image](/arctos-theme/blocks/basic/image.md) and [Video](/arctos-theme/blocks/basic/video.md) blocks.

<table><thead><tr><th width="100.92578125">Setting</th><th width="119.96484375">Options</th><th width="462.046875">What it does</th></tr></thead><tbody><tr><td><strong>Type</strong></td><td><ul><li>Image</li><li>Video</li></ul></td><td>Selects the Banner's background media type.</td></tr><tr><td><strong>File</strong></td><td>Image or video picker</td><td>Selects the file for the chosen <strong>Type</strong>.</td></tr><tr><td><strong>Show different media on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to display an alternate image or video file specifically on mobile devices.</td></tr></tbody></table>

</details>

<details>

<summary>Layout</summary>

Layout controls set the Banner frame's orientation, aspect ratio, width, and mobile-specific sizing. These are shared media sizing controls, so they are not repeated here.

To learn how these settings work, see [Image](/arctos-theme/blocks/basic/image.md) and [Video](/arctos-theme/blocks/basic/video.md).

</details>

<details>

<summary>Inner content layout</summary>

Arrange the blocks placed over the Banner media.

Inner content layout controls set the direction, alignment, position, baseline alignment, gap, and mobile layout for all reusable blocks inside the Banner. These controls work similarly to [Group](/arctos-theme/blocks/layout/group.md).

* Use Banner layout when all inner blocks should move together over the media.
* Add a Group inside the Banner when only a smaller set of blocks needs its own layout, background, spacing, or panel treatment.

</details>

<details>

<summary>Style</summary>

Use these settings to improve text contrast and match the Banner to the surrounding design.

Banner style includes color scheme, media overlay, filter presets, corner radius, custom corner controls, and parallax effect. These settings affect the Banner's background media and the color context for its inner content.

</details>

<details>

<summary>Interaction</summary>

Control where the Banner links and how it reacts when customers hover over it.

<table><thead><tr><th width="114.66015625">Setting</th><th width="99.640625">Options</th><th width="468.21484375">What it does</th></tr></thead><tbody><tr><td><strong>Full banner link</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Makes the entire banner surface clickable. Nested interactive elements (such as buttons, video controls, or marquee links) remain independently clickable.</td></tr></tbody></table>

The Banner's hover controls work like Image hover controls: keep the original media, apply a color treatment, or swap to another image or video on hover. To learn more about link and hover behavior, see [Image](/arctos-theme/blocks/basic/image.md).

</details>

<details>

<summary>Spacing</summary>

Spacing includes padding inside the Banner and margin around the Banner.

For both controls, you can:

* turn custom spacing on or off;
* set the top, bottom, left, and right values from *0–200px*;
* turn on **Custom on mobile** and use separate mobile values from *0–100px*.

</details>