# Banner

The Banner section displays a background image or video with text overlay, creating visually appealing hero banners for your store. It supports both desktop and mobile-specific media assets with customizable text alignment and spacing.

<div data-full-width="true"><figure><img src="/files/At4SSB8vRae219vv7kR5" alt=""><figcaption></figcaption></figure></div>

#### Common use cases

* Hero banner on homepage to showcase key products or promotions
* Announcement banners for sales or special events
* Category introductions at the top of collection pages
* Welcome sections with branding elements

#### Usage tips

* Use high-contrast images to ensure text remains readable
* Keep content concise and focused on a single message or call-to-action
* For mobile, consider using a different image that works well with portrait orientation
* Test your banner across different screen sizes to ensure responsive behavior
* When using video backgrounds, ensure they're not distracting from your main message

### Section settings

<table><thead><tr><th width="239.671875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>URL</td><td>Link for the entire section. When set, the whole banner becomes clickable.</td></tr><tr><td>Desktop background image</td><td>The main image shown on desktop devices.</td></tr><tr><td>Mobile background image</td><td>Optional alternative image optimized for mobile devices.</td></tr><tr><td>Video background</td><td>Optional video to play in the background of the section.</td></tr><tr><td>Show image</td><td>Toggle to show or hide the background image.</td></tr><tr><td>Show entire image</td><td>When enabled, displays the full image (object-contain). When disabled, crops the image to fill the space (object-cover).</td></tr><tr><td>Show video on mobile</td><td>Toggle to show or hide the video background on mobile devices.</td></tr><tr><td>Color scheme</td><td>Select the background color scheme for the section.</td></tr><tr><td>Text color</td><td>Choose default, force light, or force dark text color.</td></tr><tr><td>Border color</td><td>Select a subtle or strong border color.</td></tr><tr><td>Enable gradient</td><td>Add a gradient overlay that darkens the bottom of the image.</td></tr><tr><td>Border position</td><td>Choose where borders appear: none, top, bottom, or top and bottom.</td></tr><tr><td>Height</td><td>Select from extra small to extra large height presets.</td></tr><tr><td>Vertical alignment</td><td>Position content at the top, middle, or bottom of the section.</td></tr><tr><td>Horizontal alignment</td><td>Position content at the left, center, or right of the section.</td></tr><tr><td>Visibility</td><td>Show on all devices, mobile only, or desktop only.</td></tr></tbody></table>

### Block settings

#### Heading

The heading block adds a large title to your banner. Limited to 1 per section.

<table><thead><tr><th width="239.48828125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Content</td><td>Text to display as the heading.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the heading (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the heading (0-300px).</td></tr></tbody></table>

#### Content

The content block adds descriptive text to your banner. Limited to 3 per section.

<table><thead><tr><th width="240.23046875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Content</td><td>Rich text to display in the banner.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the content (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the content (0-300px).</td></tr></tbody></table>

#### Buttons

The buttons block adds up to two call-to-action buttons. Limited to 1 per section.

<table><thead><tr><th width="240.23828125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Primary button color</td><td>Select from primary, secondary, tertiary, neutral, or plain button styles.</td></tr><tr><td>Primary button label</td><td>Text to display on the primary button.</td></tr><tr><td>Primary button URL</td><td>Link for the primary button.</td></tr><tr><td>Secondary button color</td><td>Select from primary, secondary, tertiary, neutral, or plain button styles.</td></tr><tr><td>Secondary button label</td><td>Text to display on the secondary button.</td></tr><tr><td>Secondary button URL</td><td>Link for the secondary button.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the buttons (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the buttons (0-300px).</td></tr></tbody></table>

#### App

This block allows app developers to add content to the banner section.


---

# 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.brickspacelab.com/paper/sections/content-and-media/banner.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.