# Alternative banner

### Section overview

The Banner Alternative section displays a side-by-side layout with an image on one side and content (headings, text, and buttons) on the other. On mobile, it stacks with the image on top and content below.

#### Common use cases

* Creating feature highlights with explanatory text and call-to-action buttons
* Showcasing product benefits with supporting imagery
* Creating promotional announcements with supporting visuals
* Building welcome sections with introductory content for store visitors

#### Usage tips

* Use high-contrast images that complement the text overlay for better readability
* Keep content concise and focused on a single message or call-to-action
* Consider mobile appearance when setting content alignment and spacing
* Adjust the content width setting based on your content length and image importance

### Section settings

| Setting              | Description                                                                      |
| -------------------- | -------------------------------------------------------------------------------- |
| Image                | The background image that appears on desktop and mobile                          |
| Color scheme         | The color theme for the section background and text                              |
| Text color           | Override the default text color from the color scheme                            |
| Border color         | Choose between subtle or strong border colors                                    |
| Border position      | Position of borders around the section (top, bottom, both, or none)              |
| Content width        | Percentage width of the content area relative to the section (10-90%)            |
| Image position       | Position the image on the left or right side of the content                      |
| Height               | Control the vertical height/spacing of the section                               |
| Vertical alignment   | Align content to the top, middle, or bottom of the section                       |
| Horizontal alignment | Align content to the left, center, or right of the section                       |
| Visibility           | Control whether the section appears on all devices, mobile only, or desktop only |

### Block settings

#### Heading

This block adds a primary heading to the section.

* Block limit: 1

| Setting        | Description                                      |
| -------------- | ------------------------------------------------ |
| Content        | The heading text to display                      |
| Top spacing    | Amount of space (in px) to add above the heading |
| Bottom spacing | Amount of space (in px) to add below the heading |

#### Content

This block adds formatted text content to the section.

* Block limit: 3

| Setting        | Description                                      |
| -------------- | ------------------------------------------------ |
| Content        | Rich text content to display                     |
| Top spacing    | Amount of space (in px) to add above the content |
| Bottom spacing | Amount of space (in px) to add below the content |

#### Buttons

This block adds primary and secondary buttons to the section.

* Block limit: 1

| Setting                | Description                                                                     |
| ---------------------- | ------------------------------------------------------------------------------- |
| Button color           | Style of the primary button (primary, secondary, tertiary, neutral, or plain)   |
| Button label           | Text displayed on the primary button                                            |
| Button URL             | The link destination when the primary button is clicked                         |
| Secondary button color | Style of the secondary button (primary, secondary, tertiary, neutral, or plain) |
| Secondary button label | Text displayed on the secondary button                                          |
| Secondary button URL   | The link destination when the secondary button is clicked                       |
| Top spacing            | Amount of space (in px) to add above the buttons                                |
| Bottom spacing         | Amount of space (in px) to add below the buttons                                |


---

# 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/alternative-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.