> 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-image.md).

# 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
>
> <img src="/files/Holk9eLGexZzI87sTqYZ" alt="" data-size="original">

> Split layout with style split 1 and verticle scroll
>
> <img src="/files/BWnA2PQAna1D661ukriY" alt="" data-size="original">

***

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