# 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:
>
> ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F8XaoDExZ7ySQoXButgFe%2FScreenshot%202025-05-21%20at%205.01.35%E2%80%AFPM.png?alt=media\&token=f56dfabf-ca94-4bea-bde9-fdc4592818d7)

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