> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/banner-element/banner-element-with-background-color.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.twinr.dev/native-screen/banner-element/banner-element-with-background-color.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.