Mobile Card Builder components
Learn about the components that make up mobile cards
Adding and removing components
Buttons
Button components allow users to perform an action when the button is selected. Use buttons to add actions to your cards.
|
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 |
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:
|
|
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 |
|
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 |
|
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 |
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.
|
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
|
|
Alignment |
Determines the alignment of the components within the container. Select from these values:- Stretch
|
|
Distribution |
Determines the distribution of the components within the container. Select from these values:- Equal
|
|
Background type |
The type of background the container will have. Select from these values:- None
|
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.
| 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. |
Images
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.
|
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
|
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.
|
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
|
|
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
|
|
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 |
Video components display an embedded video in your card. Both Youtube and Viemo video URLs are supported.
|
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
|
|
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. |
--- title: Mobile Card Builder components description: Learn about the components that make up mobile cards locale: en-US canonical_url: https://www.servicenow.com/docs/r/mobile/mcb-elements.html release: brazil topic_type: reference last_updated: "2026-09-10" reading_time_minutes: 6 breadcrumb: [User interface, Mobile Card Builder, Building tools, Building mobile apps, Mobile Platform] --- # Mobile Card Builder components Learn about the components that make up mobile cards ## Adding and removing components ## Buttons Button components allow users to perform an action when the button is selected. Use buttons to add actions to your cards. <table id="table_a5m_jb4_zcc"><thead><tr><th> Property </th><th> Description </th></tr></thead><tbody><tr><td> Element ID </td><td> The button's unique JSON ID attribute. </td></tr><tr><td colspan="2"> Display </td></tr><tr><td> Height </td><td> Height of your button in pixels </td></tr><tr><td> Width </td><td> Width of your button in pixels. If this property is left blank, the button fills the available space. </td></tr><tr><td> Corner radius </td><td> The corner radius of your button. Increase this value to create rounded corners for your button. </td></tr><tr><td> Margin top </td><td> The top margin of your button in pixels </td></tr><tr><td> Margin bottom </td><td> The bottom margin of your button in pixels </td></tr><tr><td> Margin left </td><td> The left margin of your button in pixels </td></tr><tr><td> Margin right </td><td> The right margin of your button in pixels </td></tr><tr><td> Border width </td><td> Width of your button’s border in pixels. </td></tr><tr><td colspan="2"> Button properties </td></tr><tr><td> Format </td><td> Determine whether your button will appear with a text label, icon, or both. Select from the following options: - Label - Icon - Label and icon </td></tr><tr><td> Label </td><td> The button's text label.**Note:** This option will only appear if either the **Label** or **Label and icon** format is selected. </td></tr><tr><td> Icon </td><td> 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. </td></tr><tr><td> Accessible name </td><td> 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. </td></tr><tr><td colspan="2"> Actions </td></tr><tr><td> Multiple </td><td> Create a menu of multiple different actions that users can choose from when they select the button. </td></tr><tr><td> Function </td><td> Choose either a Predefined or Configurable function. Configurable functions are taken from the sys\_sg\_button table. Available predefined functions: - Cancel - Continue - Log out </td></tr><tr><td colspan="2"> Button appearance </td></tr><tr><td> Text and icon style </td><td> The formatting style of your text, icon, or both. </td></tr><tr><td> Background color variable </td><td> The button background’s color variable. </td></tr><tr><td> Background color </td><td> The button background’s color. The value for this property is an HTML color code, for example `#A0522D` for sienna. </td></tr><tr><td> Text and icon color variable </td><td> The button's text and icon’s color variable. </td></tr><tr><td> Text and icon color </td><td> The button's text and variable color. The value for this property is an HTML color code, for example `#A0522D` for sienna. </td></tr><tr><td> Border color variable </td><td> The button border’s color variable. </td></tr><tr><td> Border color </td><td> The button border's color. The value for this property is an HTML color code, for example `#A0522D` for sienna. </td></tr></tbody> </table>## Containers 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. <table id="table_nm2_bp4_ynb"><thead><tr><th> Property </th><th> Description </th></tr></thead><tbody><tr><td colspan="2"> Properties </td></tr><tr><td> Element ID </td><td> The container's unique JSON ID attribute. </td></tr><tr><td colspan="2"> Display </td></tr><tr><td> Height </td><td> Height of your container in pixels </td></tr><tr><td> Width </td><td> Width of your container in pixels. If this property is left blank, the container fills the available space. </td></tr><tr><td> Margin top </td><td> The top margin of your container in pixels </td></tr><tr><td> Margin bottom </td><td> The bottom margin of your container in pixels </td></tr><tr><td> Margin left </td><td> The left margin of your container in pixels </td></tr><tr><td> Margin right </td><td> The right margin of your container in pixels </td></tr><tr><td> Corner radius </td><td> The corner radius of your container. Increase this value to create rounded corners for your container. </td></tr><tr><td colspan="2"> Appearance </td></tr><tr><td> Container direction </td><td> Determines orientation direction of the components within the container. Select from these values:- Horizontal - Vertical </td></tr><tr><td> Alignment </td><td> Determines the alignment of the components within the container. Select from these values:- Stretch - Center - Left - Right - Top - Bottom </td></tr><tr><td> Distribution </td><td> Determines the distribution of the components within the container. Select from these values:- Equal - Auto </td></tr><tr><td> Background type </td><td> The type of background the container will have. Select from these values:- None - Color - Image </td></tr></tbody> </table>## Icons 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. |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.| ## Images 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. <table id="table_lwl_gr4_ynb"><thead><tr><th> Property </th><th> Description </th></tr></thead><tbody><tr><td colspan="2"> Properties </td></tr><tr><td> Element ID </td><td> The image's unique JSON ID attribute. </td></tr><tr><td colspan="2"> Display </td></tr><tr><td> Height </td><td> Height of your image in pixels. </td></tr><tr><td> Width </td><td> Width of your image in pixels. </td></tr><tr><td> Margin top </td><td> The top margin of your image in pixels. </td></tr><tr><td> Margin right </td><td> The right margin of your image in pixels. </td></tr><tr><td> Margin bottom </td><td> The bottom margin of your image in pixels. </td></tr><tr><td> Margin left </td><td> The left margin of your image in pixels. </td></tr><tr><td> Corner radius </td><td> The corner radius of your image. Increase this value to create rounded corners for your image. </td></tr><tr><td colspan="2"> Image </td></tr><tr><td> Use mapped field </td><td> Choose whether the image will use a mapped field. </td></tr><tr><td> Field value </td><td> The value of the mapped field for your image. This property is only visible if **Use mapped field** is selected. </td></tr><tr><td> Attachment </td><td> The attached image to use. This property is only visible if **Use mapped field** is not selected. </td></tr><tr><td> Image scaling </td><td> The scaling for your image. Select from these values:- Fill - Fit </td></tr></tbody> </table>## Text 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. <table id="table_pjv_jt4_ynb"><thead><tr><th> Property </th><th> Description </th></tr></thead><tbody><tr><td colspan="2"> Properties </td></tr><tr><td> Element ID </td><td> The text's unique JSON ID attribute. </td></tr><tr><td colspan="2"> Display </td></tr><tr><td> Field type </td><td> The type of text field. Select from these values:- Field value - Field label - Static text </td></tr><tr><td> Text value </td><td> The text that appears in the text component. This value is only used when you have selected **Static text** in the **Field type** property. </td></tr><tr><td> Height </td><td> Height of your text component in pixels. </td></tr><tr><td> Width </td><td> Width of your text component in pixels. </td></tr><tr><td> Margin top </td><td> The top margin of your text component in pixels. </td></tr><tr><td> Margin right </td><td> The right margin of your text component in pixels. </td></tr><tr><td> Margin bottom </td><td> The bottom margin of your text component in pixels. </td></tr><tr><td> Margin left </td><td> The left margin of your text component in pixels. </td></tr><tr><td colspan="2"> Appearance </td></tr><tr><td> Text style </td><td> The formatting style of your text. </td></tr><tr><td> Text alignment </td><td> Alignment for the text in your component. Select from these values:- Left - Center - Right </td></tr><tr><td> Max number of lines </td><td> The maximum number of lines for the text in your element. </td></tr><tr><td> Text color variable </td><td> The color variable for your text. </td></tr><tr><td> Text color </td><td> 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. </td></tr></tbody> </table>## Videos Video components display an embedded video in your card. Both Youtube and Viemo video URLs are supported. <table id="table_lvf_qfz_fdc"><thead><tr><th> Property </th><th> Description </th></tr></thead><tbody><tr><td colspan="2"> Properties </td></tr><tr><td> Element ID </td><td> The video's unique JSON ID attribute. </td></tr><tr><td colspan="2"> Display </td></tr><tr><td> Use mapped field </td><td> Choose whether the video will use a mapped field. </td></tr><tr><td> Field value </td><td> The value of the mapped field for your video. This property is only visible if **Use mapped field** is selected. </td></tr><tr><td> URL </td><td> The URL of the video to be embedded. This property is only visible if **Use mapped field** is not selected. </td></tr><tr><td> Playback mode </td><td> How the video will display on a mobile device. Select from these values:- Fullscreen - Inline </td></tr><tr><td> Width </td><td> Width of your video component in pixels. </td></tr><tr><td> Height </td><td> Height of your video component in pixels. </td></tr><tr><td> Margin top </td><td> The top margin of your video component in pixels. </td></tr><tr><td> Margin right </td><td> The right margin of your video component in pixels. </td></tr><tr><td> Margin bottom </td><td> The bottom margin of your video component in pixels. </td></tr><tr><td> Margin left </td><td> The left margin of your video component in pixels. </td></tr></tbody> </table>**Parent Topic:**[Mobile Card Builder user interface](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/mobile/mcb-stage-ui.md)
| title | Mobile Card Builder components |
| description | Learn about the components that make up mobile cards |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/mobile/mcb-elements.html |
| release | brazil |
| topic_type | reference |
| last_updated | 2026-09-10 |
| reading_time_minutes | 6 |
| breadcrumb | User interfaceMobile Card BuilderBuilding toolsBuilding mobile appsMobile Platform |