# 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                                |