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

# Image Element

The Image Element lets you add a standalone image to your app screen, perfect for visual banners, promo cards, logos, or clickable graphics. Like a button, you can also link the image to a URL or screen.

***

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

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

* Select Image – Upload your image (JPEG, PNG, etc.)
* Click Action – Add a URL or app screen link

  Example: <https://yourdomain.com> or twinr://about

📌 **Tip**: Use this element for visual-only promotions or when you don’t need text/buttons layered on top.
{% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Customize the Look</mark>

### 🎨 Design

* Ratio – Choose aspect ratio (e.g., 1:1, 16:9, 4:3)
* Corner Radius – Adjust how rounded the image corners are
  * Options: Square → Rounded → Pill
* Display Mode:
  * Fit – Keeps full image visible (may leave white space)
  * Fill – Covers the container area (may crop image)

### 📏 Margin

Adjust padding around the image:

* Top, Bottom, Left, Right – all customizable via sliders

### 👁️ Visibility Options

Control where and when the image shows:

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

## <mark style="color:green;">📱 Use Case Ideas</mark>

* Promotional banners
* Logos or brand visuals
* Full-width hero images
* Image-based navigation (clickable tiles)

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

| Feature      | What You Can Do                       |
| ------------ | ------------------------------------- |
| Image        | Upload an image                       |
| Click Action | Add a URL or screen link              |
| Ratio & Fit  | Control image scaling and size        |
| Styling      | Apply rounded corners, adjust spacing |
| Visibility   | Platform/device/user targeting        |