# Banner Element(with Background Image)

The Banner with Background Image is one of the most visually striking elements in your app. It’s designed to grab attention, great for promotions, offers, or important updates. You can add a background image, customize text styles, layout, button action, and more.

***

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

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

This is where you set up each banner item:

### 🔽 Sections:

* Background Image: Upload your main banner visual (required)
* Title: Bold headline (e.g., “Year-End Sale”)
* Subtitle: Optional upper text (e.g., “Up to 90%”)
* Description: Supporting details or message
* Button Text: CTA (e.g., “Shop Now”)
* Button Action: Enter the URL to navigate when the button is tapped

You can create multiple banners and manage them using the Banner Item List (add, delete, reorder, toggle visibility).
{% endtab %}

{% tab title="Settings Tab" %}

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

The banner comes with detailed configuration options grouped into different sections:

### 📐 Layout

* Choose Layout:
  * Split 1, Split 2, Split 3: Image and text side-by-side in various arrangements
  * Stack Top, Center, Bottom: Stack content vertically
* Alignment: Align content left, center, or right

### 🖱️ Scroll Behaviour

* Scroll Direction: Switch between horizontal or vertical banners
* Indicator Style: Multiple styles to show scrolling progress
* Indicator Alignment: Align indicator (left, center, right)
* Indicator Position: Show indicator on banner or under banner

### 🎨 Design Settings

* Ratio: Choose aspect ratio (e.g., 4:3)
* Corner Radius: Adjust image roundness — square, rounded, or pill
* Apply Overlay: Optionally apply a dark overlay to enhance text readability

### **🔤 Title Style**

* Font Size (e.g., 16px)
* Font Weight (e.g., Bold – 700)
* Color – HEX input (e.g., #FFFFFF)
* Opacity – Adjust transparency (0 to 100%)

### **✍️ Subtitle Style**

* Font Size (e.g., 10px)
* Font Weight (e.g., SemiBold – 600)
* Color and Opacity

### **📝 Description Style**

* Same customization options as subtitle — ideal for body text

### **🔘 Button Style**

* Choose from:
  * Filled
  * Outlined
  * Text
* Customize:
  * Margin (Top/Bottom/Left/Right)
  * Button color, shape, and padding via theme

### 👁️ Visibility

Control when and where this banner is shown:

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

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

Below are examples of how the banner appears in the app:

> Clean layout with center stacked content and horizontal scroll
>
> ![](/files/Holk9eLGexZzI87sTqYZ)

> Split layout with style split 1 and verticle scroll
>
> ![](/files/BWnA2PQAna1D661ukriY)

***

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

| Tab              | What You Can Customize                           |
| ---------------- | ------------------------------------------------ |
| Content          | Image, title, subtitle, description, button text |
| Layout           | Position, alignment, scroll indicators           |
| Text Styles      | Font size, weight, color, opacity                |
| Button Style     | Design type, margins, link                       |
| Visibility       | User/device/platform targeting                   |
| Multiple Banners | Manage, reorder, or hide individual items        |


---

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