---
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


---

# MCB components

# Mobile Card Builder
components {#ariaid-title1}

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

Learn about the components that make up mobile cards

## Adding and removing components {#mcb-elements__section_gqy_xn4_ynb}

## Buttons {#mcb-elements__section_kfq_3b4_zcc}

Button components allow users to perform an action when the button is selected. Use buttons to add actions to your cards.  
{#mcb-elements__table_a5m_jb4_zcc__entry__2}

| Property | Description |
|-|-|
| Element ID | The button's unique JSON ID attribute. |
| Display ||
| Height | Height of your button in pixels |
| Width | Width of your button in pixels. If this property is left blank, the button fills the available space. |
| Corner radius | The corner radius of your button. Increase this value to create rounded corners for your button. |
| Margin top | The top margin of your button in pixels |
| Margin bottom | The bottom margin of your button in pixels |
| Margin left | The left margin of your button in pixels |
| Margin right | The right margin of your button in pixels |
| Border width | Width of your button's border in pixels. |
| Button properties ||
| Format | Determine whether your button will appear with a text label, icon, or both. Select from the following options: * Label * Icon * Label and icon {#mcb-elements__ul_ppl_kc4_zcc} |
| Label | The button's text label. Note: This option will only appear if either the Label or Label and icon format is selected. |
| Icon | The icon that will display on your button. Choose an icon from the provided drop-down list. Note: This option will only appear if either the Icon or Label and icon format is selected. |
| Accessible name | The alternative text that will be read aloud to people using assistive devices so that they know the purpose of the button. Note: This option will only appear if the Icon format is selected. |
| Actions ||
| Multiple | Create a menu of multiple different actions that users can choose from when they select the button. |
| Function | Choose either a Predefined or Configurable function. Configurable functions are taken from the sys_sg_button table. Available predefined functions: * Cancel * Continue * Log out {#mcb-elements__ul_q24_hd4_zcc} |
| Button appearance ||
| Text and icon style | The formatting style of your text, icon, or both. |
| Background color variable | The button background's color variable. |
| Background color | The button background's color. The value for this property is an HTML color code, for example `#A0522D` for sienna. |
| Text and icon color variable | The button's text and icon's color variable. |
| Text and icon color | The button's text and variable color. The value for this property is an HTML color code, for example `#A0522D` for sienna. |
| Border color variable | The button border's color variable. |
| Border color | The button border's color. The value for this property is an HTML color code, for example `#A0522D` for sienna. |
[Table 1. Button configuration properties]

{#mcb-elements__table_a5m_jb4_zcc}

## Containers {#mcb-elements__section_y5k_yn4_ynb}

Containers components contain other components. A container can contain any card component,
including another container. Use containers to organize your card components, and determine
how the components within the container are aligned and distributed.  
{#mcb-elements__table_nm2_bp4_ynb__entry__2}

| Property | Description |
|-|-|
| Properties ||
| Element ID | The container's unique JSON ID attribute. |
| Display ||
| Height | Height of your container in pixels |
| Width | Width of your container in pixels. If this property is left blank, the container fills the available space. |
| Margin top | The top margin of your container in pixels |
| Margin bottom | The bottom margin of your container in pixels |
| Margin left | The left margin of your container in pixels |
| Margin right | The right margin of your container in pixels |
| Corner radius | The corner radius of your container. Increase this value to create rounded corners for your container. |
| Appearance ||
| Container direction | Determines orientation direction of the components within the container. Select from these values: * Horizontal * Vertical {#mcb-elements__ul_p5f_dq4_ynb} |
| Alignment | Determines the alignment of the components within the container. Select from these values: * Stretch * Center * Left * Right * Top * Bottom {#mcb-elements__ul_prk_1q4_ynb} |
| Distribution | Determines the distribution of the components within the container. Select from these values: * Equal * Auto {#mcb-elements__ul_d52_xp4_ynb} |
| Background type | The type of background the container will have. Select from these values: * None * Color * Image {#mcb-elements__ul_nth_3dz_fdc} |
[Table 2. Container configuration properties]

{#mcb-elements__table_nm2_bp4_ynb}

## Icons {#mcb-elements__section_pwz_j2z_fdc}

Icon components are used to display an icon on your card. You can choose an icon from the Icon dropdown menu in the Config screen.  
{#mcb-elements__table_qwz_j2z_fdc__entry__2}

| Property | Description |
|-|-|
| Properties ||
| Element ID | The icon's unique JSON ID attribute. |
| Display ||
| Icon | The icon to be displayed. |
| Margin top | The top margin of your icon in pixels. |
| Margin right | The right margin of your icon in pixels. |
| Margin bottom | The bottom margin of your icon in pixels. |
| Margin left | The left margin of your icon in pixels. |
| Appearance ||
| Color variable | The color variable of your icon. |
| Color | The color of your icon. The value for this property is an HTML color code, for example `#A0522D` for sienna. |
[Table 3. Icon configuration properties]

{#mcb-elements__table_qwz_j2z_fdc}

## Images {#mcb-elements__section_nr5_yn4_ynb}

Image components are used to display an image. You define an image to display by selecting
a field on your record that contains an image, for example, the
Avatar field on a User record.  
{#mcb-elements__table_lwl_gr4_ynb__entry__2}

| Property | Description |
|-|-|
| Properties ||
| Element ID | The image's unique JSON ID attribute. |
| Display ||
| Height | Height of your image in pixels. |
| Width | Width of your image in pixels. |
| Margin top | The top margin of your image in pixels. |
| Margin right | The right margin of your image in pixels. |
| Margin bottom | The bottom margin of your image in pixels. |
| Margin left | The left margin of your image in pixels. |
| Corner radius | The corner radius of your image. Increase this value to create rounded corners for your image. |
| Image ||
| Use mapped field | Choose whether the image will use a mapped field. |
| Field value | The value of the mapped field for your image. This property is only visible if Use mapped field is selected. |
| Attachment | The attached image to use. This property is only visible if Use mapped field is not selected. |
| Image scaling | The scaling for your image. Select from these values: * Fill * Fit {#mcb-elements__ul_xd5_1s4_ynb} |
[Table 4. Image configuration properties]

{#mcb-elements__table_lwl_gr4_ynb}

## Text {#mcb-elements__section_eng_zn4_ynb}

Text components display text on your card. This can be static text, or text from the label
of value of a field. Use text components to the information your users need to see first
when viewing lists of records.  
{#mcb-elements__table_pjv_jt4_ynb__entry__2}

| Property | Description |
|-|-|
| Properties ||
| Element ID | The text's unique JSON ID attribute. |
| Display ||
| Field type | The type of text field. Select from these values: * Field value * Field label * Static text {#mcb-elements__ul_qmd_rt4_ynb} |
| Text value | The text that appears in the text component. This value is only used when you have selected Static text in the Field type property. |
| Height | Height of your text component in pixels. |
| Width | Width of your text component in pixels. |
| Margin top | The top margin of your text component in pixels. |
| Margin right | The right margin of your text component in pixels. |
| Margin bottom | The bottom margin of your text component in pixels. |
| Margin left | The left margin of your text component in pixels. |
| Appearance ||
| Text style | The formatting style of your text. |
| Text alignment | Alignment for the text in your component. Select from these values: * Left * Center * Right {#mcb-elements__ul_cln_w54_ynb} |
| Max number of lines | The maximum number of lines for the text in your element. |
| Text color variable | The color variable for your text. |
| Text color | The color of your text. The value for this property is an HTML color code, for example `#A0522D` for sienna. Note: You cannot change the background color of a text component, but you can place your text component within a container component, and change the container background color. |
[Table 5. Text configuration properties]

{#mcb-elements__table_pjv_jt4_ynb}

## Videos {#mcb-elements__section_kvf_qfz_fdc}

Video components display an embedded video in your card. Both Youtube and Viemo video URLs are supported.  
{#mcb-elements__table_lvf_qfz_fdc__entry__2}

| Property | Description |
|-|-|
| Properties ||
| Element ID | The video's unique JSON ID attribute. |
| Display ||
| Use mapped field | Choose whether the video will use a mapped field. |
| Field value | The value of the mapped field for your video. This property is only visible if Use mapped field is selected. |
| URL | The URL of the video to be embedded. This property is only visible if Use mapped field is not selected. |
| Playback mode | How the video will display on a mobile device. Select from these values: * Fullscreen * Inline {#mcb-elements__ul_s5d_yfz_fdc} |
| Width | Width of your video component in pixels. |
| Height | Height of your video component in pixels. |
| Margin top | The top margin of your video component in pixels. |
| Margin right | The right margin of your video component in pixels. |
| Margin bottom | The bottom margin of your video component in pixels. |
| Margin left | The left margin of your video component in pixels. |
[Table 6. Video configuration properties]

{#mcb-elements__table_lvf_qfz_fdc}