# Banner Element(with Background Color)

The Banner with Background Color is a clean, lightweight version of the image banner. Instead of using a background image, you use a solid color — with the option to add an image *within* the banner content.

It’s ideal for highlighting offers, updates, or info blocks that don’t need a full-width image background.

***

{% tabs %}
{% tab title="Content Tab" %}

## <mark style="color:green;">Add Your Banner Info</mark>

You can add all the same content as the image banner:

* Title (e.g., “Special Deal”)
* Subtitle (optional)
* Description (e.g., “Free shipping on orders over $50”)
* Button Text and Action URL

✅ NEW: You can add an image inside the banner (e.g., a product or icon) — separate from the background.
{% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Design & Customization</mark>

### Layout

* Choose Layout: Split and Stack layouts are available (like image banner)
* ✅ Image Position: Since the image is added as content, you can place it:
  * Left
  * Right
  * Top
  * Bottom

### Scroll Behaviour

Same options as the image banner:

* Vertical / Horizontal scrolling
* Indicator dots and their alignment

### 🎨 Design Settings

All the text customization options are available for:

* Title Style
* Subtitle Style
* Description Style
* Button Style
* Margins for spacing

### 👁️ Visibility Options

Same as all Twinr native elements:

* Platform: Android, iOS, or All
* Device: Mobile or Tablet/iPad
* User: Guest, Logged-in, or All
  {% endtab %}
  {% endtabs %}

### ✅ What’s Different from Image Banner?

| Background Image         | ✅ Yes | ❌ No  |
| ------------------------ | ----- | ----- |
| Background Color         | ❌ No  | ✅ Yes |
| Content Image (inside)   | ❌ No  | ✅ Yes |
| Overlay Option           | ✅ Yes | ❌ No  |
| Image Position (Content) | ❌ No  | ✅ Yes |

## <mark style="color:green;">📱 How It Looks</mark>

> Here’s an example of a banner with background color and content image on the right side:
>
> ![](/files/Yrr7QQYZwegVp0pJ7Sv7)

## <mark style="color:green;">✅ Summary</mark>

| Tab        | What You Can Do                                  |
| ---------- | ------------------------------------------------ |
| Content    | Add title, description, CTA, and an inline image |
| Layout     | Choose content position and scrolling behavior   |
| Design     | Style text, buttons, spacing                     |
| Visibility | Show to specific users, platforms, or devices    |


---

# 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.twinr.dev/native-screen/banner-element/banner-element-with-background-color.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.