Mobile Card Builder user interface

---
title: Mobile Card Builder user interface
description: Learn about the Mobile Card Builder user interface to get started building and modifying your mobile cards.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/mobile/mcb-stage-ui.html
release: brazil
topic_type: reference
last_updated: "2026-09-10"
reading_time_minutes: 3
breadcrumb: [Mobile Card Builder, Building tools, Building mobile apps, Mobile Platform]
---

# Mobile Card Builder user interface

Learn about the Mobile Card Builder user interface to get started building and modifying your mobile cards.

\[Omitted image "card-builder-stage.png"\] Alt text: Mobile Card Builder.

## Top panel

\[Omitted image "mcb-top-banner.png"\] Alt text: Mobile Card Builder UI top section panel.

The top panel of the Mobile Card Builder contains the following information and options.

-   **Menu**

    Use the menu to access additional options.

    -   Use **Open** to close the current card and open another card.
    -   Use **Edit card properties** to update the name and short description of your card.
    -   Use **Change template** to replace the current card layout with one in a card template.

        **Note:** Card templates can only be applied to cards created in the Quebec and later releases.

    -   Use **Reset stage** to remove all elements from the current mobile card.
-   **Height and width**

    This section displays the height and width of your card in pixels. This information automatically updates as you add and remove components from your card.

-   **Undo**

    Select to undo the last update you made to your card. You can also enter `Ctrl+Z` or `⌘+Z` on your keyboard to perform this action.

-   **Redo**

    Select to redo the last update removed by the **Undo** command. You can also enter `Ctrl+Shift+Z` or `⌘+Shift+Z` on your keyboard to perform this action.

-   **Save**

    Select save to save your work.


## Left Panel

<table id="table_jdp_dhl_4nb"><tbody><tr><td>

\[Omitted image "mcb-left-panel.png"\] Alt text: Mobile Card Builder panel.

</td><td>

The left panel of the card builder contains the following information and options.

 -   **Card section**

The topmost section of the left panel shows the name of the current card.

-   **Component tree**

Below the card section you can see the components of your card organized in a tree structure. Select a component to highlight that component in the center panel. When you select a component, that component's configuration options appear in the right panel.


</td></tr></tbody>
</table>## Center Panel

Use the center panel to design the layout of your card. The panel displays the components of your card. To view the card as it appears in a mobile app, Select the **Preview** button.

\[Omitted image "mcb-center-panel-preview.png"\] Alt text: Mobile Card Builder center panel.

Select a component of your card to highlight it. You can see a tab with the name of your component, and a trash can icon. Select that icon to remove the component from your card. More configuration options for the selected component appear in the right panel.

\[Omitted image "mcb-new-component-2.png"\] Alt text: Adding a component in Mobile Card Builder.

Select a plus icon \(\[Omitted image "mcb-plus-icon.png"\] Alt text: plus icon\) to select a new component to add to your mobile card. For information about adding a button, see [Card actions in Mobile Card Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/mobile/mcb-card-actions.md).

Remove components by selecting them and then select the delete icon \(\[Omitted image "mcb-delete-icon.png"\] Alt text: plus icon\).

## Right Panel

<table id="table_klm_z3l_4nb"><tbody><tr><td>

The right panel of the card builder contains the configuration options for the selected component. The available configuration options depend on the type of component selected.

 When you change a components configuration, can see the changes immediately in the center panel. If you are using the preview option, select **Update preview** to update the preview of your component.

 Configuration options include formatting options such as:

 -   Size
-   Margins
-   Corner radius
-   Text alignment

 You can also use this panel to map field values to components in your card. For details see [Customize a screen using Mobile Card Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/mobile/mcb-customize-item-view.md)

.

</td><td>

\[Omitted image "mcb-right-panel.png"\] Alt text: Mobile Card Builder panel

</td></tr></tbody>
</table>-   **[Mobile Card Builder components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/mobile/mcb-elements.md)**  
Learn about the components that make up mobile cards