---
sourceDocument: Australia Mobile Configuration and Navigation
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/mobile

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Mobile Configuration and Navigation

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# User interface

# Mobile Card Builder user interface {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Mobile Card Builder User Interface

The Mobile Card Builder user interface allows users to create and modify mobile cards efficiently.
Understanding its layout and features is essential for leveraging its capabilities effectively.
Show full answer Show less  

## Key Features

* **Top Panel:** Access additional options through the menu, including opening other cards, editing card properties, changing templates (available for Quebec and later releases), and resetting the card stage. It displays the card's height and width, which updates dynamically as you modify the card.
* **Undo/Redo Functions:** Use the undo and redo buttons, or keyboard shortcuts (Ctrl+Z/Ctrl+Shift+Z), to manage changes to your card.
* **Left Panel:** Displays the current card name and a component tree, allowing users to select and highlight components. Configuration options for selected components appear in the right panel.
* **Center Panel:** Facilitates the design layout of your card. Users can preview the card as it would appear in a mobile app and can add or remove components easily.
* **Right Panel:** Contains configuration options for the selected component, allowing for immediate visual updates in the center panel. Options include formatting settings like size, margins, and text alignment, as well as mapping field values to components.

## Key Outcomes

By utilizing the Mobile Card Builder user interface, ServiceNow customers can efficiently design and modify mobile cards tailored to their needs. The intuitive layout and dynamic updating features enhance the user experience, ensuring that cards are visually appealing and functional for mobile applications.  
Learn about the Mobile Card Builder user interface to get started
building and modifying your mobile cards.

## Top panel {#mcb-stage-ui__section_msz_dbl_4nb}

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.
    {#mcb-stage-ui__ul_kzj_ycl_4nb}

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
    <kbd class="ph userinput">Ctrl+Z</kbd> or <kbd class="ph userinput">⌘+Z</kbd> on your keyboard to
    perform this action.

Redo
:   Select to redo the last update removed by the Undo command. You
    can also enter <kbd class="ph userinput">Ctrl+Shift+Z</kbd> or <kbd class="ph userinput">⌘+Shift+Z</kbd>
    on your keyboard to perform this action.

Save
:   Select save to save your work.

## Left Panel {#mcb-stage-ui__section_grn_chl_4nb}

|-|-|
|   | 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. |
[ ]

{#mcb-stage-ui__table_jdp_dhl_4nb}

## Center Panel {#mcb-stage-ui__section_d1f_y3l_4nb}

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.  
Figure 1. Components in the 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.  
Figure 2. Adding a component

Select a plus icon (![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://servicenow-prod.fluidtopics.net/YzPVtrlRBrQNLwgsY7DImg "Design and add actions to cards that you create within the Mobile Card Builder. You can use buttons to enable your users to perform actions directly within a card. For example, to accept or reject suggestions, call listed contacts, and to add items to a cart.").

Remove components by selecting them and then select the delete icon (![plus icon]()).

## Right Panel {#mcb-stage-ui__section_ag5_y3l_4nb}

|-|-|
| 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 {#mcb-stage-ui__ul_hvy_kbm_4nb} 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://servicenow-prod.fluidtopics.net/S2PtCz3c9a1GKLvI3Kot4w "Use Mobile Card Builder to modify the cards for your screens.") . |   |
[ ]

{#mcb-stage-ui__table_klm_z3l_4nb}
* **[Mobile Card Builder components](https://servicenow-prod.fluidtopics.net/0o_my6y9tIzrvA7waB5IaQ)**   
  Learn about the components that make up mobile cards