# Elements You can use AppMachine's preconfigured blocks to add data to your app, or you can dive deeper and design your screens down to every last detail. \ To use our Element Editor you need to add a Blank page, List, or Detail Block to your app. You can then use our drag and drop screen editor to configure your screen. ### Types of elements AppMachine offers you various types of elements to add to your pages: * Display, including text and button elements * Form elements * Card elements\

Almost every element has the following basic settings which allow you to style the screen in anyway you want:

### Display #### Container An element used to hold other elements. Can be used to define/contain components that you create so that you can more easily move, edit, or manipulate them. #### List Creates an ordered list from data made available to the app in the Data section.

Select from the available data sources in your app.

Depending on the data available, the list generated will contain the different data types like Container, Repeater, Labels, and Links. The data types/elements can be toggled on and off and are then reflected in the design of the element.

Toggling content allows you to design a screen to your liking.

![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F3ejAoimnUVwAYQh2KVFG%2FScreenshot%202023-03-21%20at%2011.04.54.png?alt=media\&token=eb0db5af-6490-4654-aefe-2d2a540e8fe2) ![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FZe1Nny6UzdbIf8mLHIns%2FScreenshot%202023-03-21%20at%2011.03.50.png?alt=media\&token=82e4d36e-225e-4895-818c-e9dcf7655205) #### Card #### Divider Creates a line that can be used to separate elements or content on your screen. You can change the color and thickness of the divider in the element's **Properties**.

#### Image Upload your own image with our image selector. * Set **Width** and **Height** using \ \- Auto\ \- Fill\ \- Fixed , set amount of pixels\ \- Flex, set fraction of the width of the screen. Is only applicable if you have multiple elements in a horizontal aligned container. * **Background size** (Fit, Contain and Cover) will only have effect when both Width and Height are not set to Auto. \ \- Fit will show the whole image\ \- Contain will adjust the image to the set Height\ \- Cover will adjust the image to fill the Width * Is **Clickable** enabled will offer customers the option to open the image in a lightbox for additional zooming.

#### Link Place a link in your screen.

Use the **Type** property to determine whether the link is shown as text or as a button. Use the **Title** property to create the text that is shown as a link (or as the text on the button). Set the **Link Type** to classify the link (and its resulting behaviour) as a Site, Email, or Phone. You can also choose whether the link opens in the app or externally. #### Icon Allows you to place an icon in your screen from a preselected library of icons. Select the icon design from the dropdown menu, determine the icon's size, its color, and the label.

The dropdown menu for icons contains a vast array of searchable icon types and styles.

#### Map Add a map to your screen.

You can add an **Address**, a custom **Marker Image**, a custom Location Label, you can toggle on or off the ability to zoom in the map, you can select the **Zoom level**, Fix the position of the map, and show the location of the app user. #### Rating #### Progress #### QR Code Adds a QR code to your screen. You can place text or a URL in the **Text** field.

#### Video Allows you to place a video in your screen.

In the properties, you can define the URL of the video, whether the video autoplays, whether the controls of the videos are shown, and whether the app can be shown full screen. #### iFrame #### Simple Detail ### Text All the text elements have settings to influence the font, color and size of the text. These are the default fonts to use to make your app look the same in every screen.\ For example a Headline element gives you the option to add a text , and it uses by default the Headline font which is set in the green Theme block. If you want to add more variation to your screen you have the option to choose another font style, change fontsize, fontcolor, Bold, Italics or alignment.

NOTE : We do advice you to mostly use the default options offered in the dropdown, to maintain uniformity in your app.

* Display * Heading * Title * Body * Label * Rich text ### Buttons Add a button to your screen and add Events to initiate an action. Set * Text * layout * Background of your button.

* **Primary button** uses the primary color as the backgroundcolor * **Secondary button** uses the secondary color as the backgroundcolor * **Action button** is shown as an overlay at the bottom of the screen and will always be visible.