# Mobile visual elements

{% hint style="info" icon="desktop" %}
This article describes visual elements available in **mobile apps** ↓

[Click here for web visual elements.](https://manual.bubble.io/core-resources/bubble-elements/element-properties/web-element-properties/visual-element-properties)
{% endhint %}

{% tabs %}
{% tab title="Experience level" %}
This core reference entry is suited for <mark style="color:green;">**beginner-level builders**</mark>**.**&#x20;

[Learn more about experience levels.](#user-content-fn-1)[^1]
{% endtab %}

{% tab title="In-depth articles (11)" %}
To learn about this topic more in-depth, we recommend reading the suggested articles below:

#### Visual elements

* Article: [Visual elements](https://manual.bubble.io/help-guides/design/elements/web-app/visual-elements)

***

**Other element categories**\
In this article series, we cover how to work with different element types:

* Article series:[ Elements](https://manual.bubble.io/help-guides/design/elements)
  * Article series: [The element hierarchy](https://manual.bubble.io/help-guides/design/elements/the-element-hierarchy)
  * Article: [The page](https://manual.bubble.io/help-guides/design/elements/web-app/the-page)
  * Article series: [Container elements](https://manual.bubble.io/help-guides/design/elements/web-app/containers) (elements that contain other elements)
  * Article series: [Input forms](https://manual.bubble.io/help-guides/design/elements/web-app/input-forms) (elements that accept input, such as text and file uploads)
* Article: [Conditional expressions](https://manual.bubble.io/help-guides/logic/conditions)\
  Making your elements change appearance in response to varying conditions.

***

**The design tab**\
In this article we cover the different tools available in the design tab.

* Article: ´[The design tab](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab)

***

#### Design

Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.

* Article series: [Design](https://manual.bubble.io/help-guides/design)
  * Article: [Responsive design](https://manual.bubble.io/help-guides/design/responsive-design)

    Building pages that work on all devices, such as a laptop and a phone.

***

**Previewing your app**

In this section about how to [preview your app](#user-content-fn-2)[^2] in the development environment.

* Article: [Previewing your app](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app)
  {% endtab %}

{% tab title="Videos (3)" %}
Bubble Academy: [How to Use the Text Element](https://www.youtube.com/watch?v=mtS7bLsV-tg)\
Bubble Academy: [Element videos](https://www.youtube.com/@BubbleIO/search?query=element) (list of videos related to elements)

#### Connecting elements to workflows

Bubble Academy: [How to Use *an Element Is Clicked* Event](https://www.youtube.com/watch?v=CObRfZiAitY)
{% endtab %}
{% endtabs %}

Visual elements are elements that display content without accepting user input; things like text, images, icons, and shapes.&#x20;

<table><thead><tr><th width="123.8359375">Element</th><th>Description</th><th>Link</th></tr></thead><tbody><tr><td>Text</td><td>Displays text.</td><td><a data-mention href="visual-element-properties-mobile/text-element-mobile">text-element-mobile</a></td></tr><tr><td>Button</td><td>Displays a button that can be connected to a <a href="../../../bubble-workflows">workflow</a> when clicked.</td><td><a data-mention href="visual-element-properties-mobile/button-element-mobile">button-element-mobile</a></td></tr><tr><td>Icon</td><td>Displays a vector-based icon from a predefined icon set.</td><td><a data-mention href="visual-element-properties-mobile/icon-element-mobile">icon-element-mobile</a></td></tr><tr><td>Image</td><td>Displays an image.</td><td><a data-mention href="visual-element-properties-mobile/image-element-mobile">image-element-mobile</a></td></tr><tr><td>Shape</td><td>Renders a basic geometric shape.</td><td><a data-mention href="visual-element-properties-mobile/shape-element-mobile">shape-element-mobile</a></td></tr><tr><td>Map</td><td>Displays a Google Map that users can interact with.</td><td><a data-mention href="visual-element-properties-mobile/map-element-mobile">map-element-mobile</a></td></tr><tr><td>Web view</td><td>Displays an inline web page from your app.</td><td><a data-mention href="visual-element-properties-mobile/web-view-mobile">web-view-mobile</a></td></tr></tbody></table>

[^1]: In the Bubble docs, experience levels are categorized into beginner, intermediate, and advanced.

    To assist with learning, especially for more complex topics, we'll recommend prerequisite reading where it could be beneficial.&#x20;

[^2]: Every chance that you make in your app can be instantly previewed so that you can see how your app looks to your users.

    User manual article: [Previewing your app](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app)

    &#x20;&#x20;


---

# 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://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/visual-element-properties-mobile.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.