> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/core-resources/bubble-elements/element-properties/web-element-properties/visual-element-properties.md).

# Visual element properties

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

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

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

#### Input forms

* Article: [Input forms](/help-guides/design/elements/web-app/input-forms.md)

***

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

* Article series:[ Elements](/help-guides/design/elements.md)
  * Article series: [The element hierarchy](/help-guides/design/elements/the-element-hierarchy.md)
  * Article: [The page](/help-guides/design/elements/web-app/the-page.md)
  * Article series: [Container elements](/help-guides/design/elements/web-app/containers.md)

    Elements that contain other elements.
  * Article: [Visual elements](/help-guides/design/elements/web-app/visual-elements.md)

    Elements like text, buttons, icons and images.
* Article: [Conditional expressions](/help-guides/logic/conditions.md)

  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](/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab.md)

***

#### Workflows

Workflows are used to connect elements with actions, such as saving the value of a text input element or uploading a file.

* Article series: [Workflows](/help-guides/logic/workflows.md)

***

#### 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](/help-guides/design.md)
  * Article: [Responsive design](/help-guides/design/responsive-design.md)\
    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](/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)
  {% endtab %}

{% tab title="Videos (5)" %}
Bubble Academy: [How to Use The Input Element](https://www.youtube.com/watch?v=C7Yg9JbVQsI\&t=1s)\
Bubble Academy: [How to Use The Mulitline Input Element](https://www.youtube.com/watch?v=vQ8ruikkxEA)\
Bubble Academy: [How to Use the Slider Input](https://www.youtube.com/watch?v=4GxuhmKij_4)\
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 Trigger Workflows From Input Changes](https://www.youtube.com/watch?v=mDEVJLujlkQ)
{% endtab %}
{% endtabs %}

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

[Click here for native mobile visual elements](/core-resources/bubble-elements/element-properties/native-mobile-element-properties/visual-element-properties-mobile.md).
{% endhint %}

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

<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="/pages/SkcqCFoFY9eTQ5oPCct4">/pages/SkcqCFoFY9eTQ5oPCct4</a></td></tr><tr><td>Button</td><td>Displays a button that can be connected to a <a href="/pages/ChWynuEmjA8m4UhEiK5W">workflow</a> when clicked.</td><td><a data-mention href="/pages/itcV4pxOAiwnT0PCFl61">/pages/itcV4pxOAiwnT0PCFl61</a></td></tr><tr><td>Icon</td><td>Displays a vector-based icon from a predefined icon set.</td><td><a data-mention href="/pages/bSP0mIYr8yaa8Aed0MsB">/pages/bSP0mIYr8yaa8Aed0MsB</a></td></tr><tr><td>Link</td><td>Displays a link that lets the user navigate to a page or URL when clicked.</td><td><a data-mention href="/pages/bSP0mIYr8yaa8Aed0MsB">/pages/bSP0mIYr8yaa8Aed0MsB</a></td></tr><tr><td>Image</td><td>Displays an image.</td><td><a data-mention href="/pages/A5UgJXkzBKri5B8GBvsB">/pages/A5UgJXkzBKri5B8GBvsB</a></td></tr><tr><td>Shape</td><td>Renders a basic geometric shape.</td><td><a data-mention href="/pages/9UhxoflZEiGAeCz8sfoj">/pages/9UhxoflZEiGAeCz8sfoj</a></td></tr><tr><td>Map</td><td>Displays a Google Map that users can interact with.</td><td><a data-mention href="/pages/sd3lBQlDkSH2woNJ9tr1">/pages/sd3lBQlDkSH2woNJ9tr1</a></td></tr><tr><td>Alert</td><td>Displays a contextual message to the user, typically for notifications or warnings.</td><td><a data-mention href="/pages/3sije9DjTfF2QP8FznJp">/pages/3sije9DjTfF2QP8FznJp</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.

[^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](/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)