Metric Card — Reference

Look up the controls for Metric Card and understand the markup, values and visual behavior they configure.

Metric Card

Metric Card settings and events. Select the component in App Structure to find these controls in Properties.

Metric Card

Name	Description
ID	Sets this element’s unique page identifier. Use a stable name such as projectSummary when another control, label or anchor must target it. Do not duplicate a static ID inside repeated markup; a component binding name and a form field’s submitted Name serve different purposes.
Class	Edits the element’s space-separated CSS class list. For example, add a project-defined class such as project-summary only when your stylesheet defines it. Preserve classes required by the component. A class name alone does not create CSS, load an extension or implement an event handler.
Label	Edits the label text or its span within the child matched by `[data-role="label"]`. This lets the parent’s inspector reach the intended content without selecting every child separately. It does not change the link destination or create an event handler. Keep that child in the component when customizing its markup; this control does not recreate a removed layout. Replace the sample wording with a concise label appropriate to its position, then preview long text at a narrow width.
Value	Edits the label text or its span within the child matched by `[data-role="value"]`. This lets the parent’s inspector reach the intended content without selecting every child separately. It does not change the link destination or create an event handler. Keep that child in the component when customizing its markup; this control does not recreate a removed layout. This field changes displayed content; it does not calculate, validate or persist a numeric result. Bind the value to a verified data source when it should update automatically.
Icon Class	Default: "fas fa-users". Attribute: class.
Icon Tone	Options: Primary (rounded-3 bg-primary bg-opacity-10 text-primary d-inline-flex align-items-center justify-content-center), Secondary (rounded-3 bg-secondary bg-opacity-10 text-secondary d-inline-flex align-items-center justify-content-center), Success (rounded-3 bg-success bg-opacity-10 text-success d-inline-flex align-items-center justify-content-center), Danger (rounded-3 bg-danger bg-opacity-10 text-danger d-inline-flex align-items-center justify-content-center), Warning (rounded-3 bg-warning bg-opacity-10 text-warning d-inline-flex align-items-center justify-content-center), Info (rounded-3 bg-info bg-opacity-10 text-info d-inline-flex align-items-center justify-content-center), Light (rounded-3 bg-light bg-opacity-10 text-light d-inline-flex align-items-center justify-content-center), Dark (rounded-3 bg-dark bg-opacity-10 text-dark d-inline-flex align-items-center justify-content-center) Default: "rounded-3 bg-primary bg-opacity-10 text-primary d-inline-flex align-items-center justify-content-center".
Trend Text	Edits the label text or its span within the child matched by `[data-role="trend"]`. This lets the parent’s inspector reach the intended content without selecting every child separately. It does not change the link destination or create an event handler. Keep that child in the component when customizing its markup; this control does not recreate a removed layout. This field changes displayed content; it does not calculate, validate or persist a numeric result. Bind the value to a verified data source when it should update automatically.
Trend Tone	Options: Up (success) (badge text-bg-success-subtle text-success), Down (danger) (badge text-bg-danger-subtle text-danger), Flat (muted) (badge text-bg-secondary-subtle text-body-secondary), Warning (badge text-bg-warning-subtle text-warning-emphasis) Default: "badge text-bg-success-subtle text-success".

Appearance

Name	Description
Back Color	Sets the element’s background using Bootstrap theme utilities. bg-primary changes the background; text-bg-primary sets a primary background with a corresponding contrasting text color. For example, use text-bg-primary for a highlighted notice. Existing custom styles can override the utility. Options: Primary Contrast (text-bg-primary), Primary Background Only (bg-primary), Primary Subtle (bg-primary-subtle), Secondary Contrast (text-bg-secondary), Secondary Background Only (bg-secondary), Secondary Subtle (bg-secondary-subtle), Success Contrast (text-bg-success), Success Background Only (bg-success), Success Subtle (bg-success-subtle), Danger Contrast (text-bg-danger), Danger Background Only (bg-danger), Danger Subtle (bg-danger-subtle), Warning Contrast (text-bg-warning), Warning Background Only (bg-warning), Warning Subtle (bg-warning-subtle), Info Contrast (text-bg-info), Info Background Only (bg-info), Info Subtle (bg-info-subtle), Light Contrast (text-bg-light), Light Background Only (bg-light), Light Subtle (bg-light-subtle), Dark Contrast (text-bg-dark), Dark Background Only (bg-dark), Dark Subtle (bg-dark-subtle), Body (bg-body), Body Secondary (bg-body-secondary), Body Tertiary (bg-body-tertiary), White (bg-white), Transparent (bg-transparent). Default: no override from this control.
Back Opacity	Changes the opacity of a background color that uses --bs-bg-opacity. For example, bg-primary with bg-opacity-25 gives a 25% primary background while leaving text opaque. It does not fade a background image and is separate from the whole-element Opacity control. Options: Default, 10% (bg-opacity-10), 25% (bg-opacity-25), 50% (bg-opacity-50), 75% (bg-opacity-75), 100% (bg-opacity-100). Default: no override from this control.
Width	Sets a width utility relative to the containing block. For example, w-50 requests 50% of the parent’s width, while w-auto lets normal layout determine the width. This is different from a grid column span and from viewport width. Options: Auto (w-auto), 25% (w-25), 50% (w-50), 75% (w-75), 100% (w-100), Max 100% (mw-100). Default: no override from this control.
Height	Sets a height utility relative to the containing block. For example, h-100 requests the parent’s full height, which needs a resolvable parent height to have the intended effect. Use auto when the content should determine height. Options: Auto (h-auto), 25% (h-25), 50% (h-50), 75% (h-75), 100% (h-100), Max 100% (mh-100). Default: no override from this control.
Opacity	Fades the whole rendered element, including its text, background and descendants. For example, opacity-50 makes the entire card half opaque. Opacity zero still leaves layout space and does not by itself disable clicks or remove content from assistive technologies. Options: Default, 0% (opacity-0), 25% (opacity-25), 50% (opacity-50), 75% (opacity-75), 100% (opacity-100). Default: no override from this control.
Shadow	Applies or removes a Bootstrap box shadow. For example, shadow-sm gives a card the theme’s small shadow and shadow-none removes this utility’s shadow. The shadow does not allocate extra layout space; its appearance comes from the active theme variables. Options: Default, None (shadow-none), Small (shadow-sm), Regular (shadow), Large (shadow-lg). Default: no override from this control.
Object Fit	Controls how replaced content such as an image fits an explicitly sized box. object-fit-cover fills the box and may crop the image; object-fit-contain keeps the whole image visible and may leave space. It does not size the box or control CSS background images. Options: Default, Contain (object-fit-contain), Cover (object-fit-cover), Fill (object-fit-fill), Scale Down (object-fit-scale), None (object-fit-none). Default: no override from this control.
Viewport Size	Applies viewport-relative sizing utilities. For example, vh-100 requests the full viewport height, whereas min-vh-100 allows a section to grow taller than the viewport when its content requires it. These sizes are relative to the viewport, not the parent. Options: Default, Width 100vw (vw-100), Min-Width 100vw (min-vw-100), Height 100vh (vh-100), Min-Height 100vh (min-vh-100). Default: no override from this control.
Placeholder	Applies Bootstrap placeholder styling for a loading skeleton. The placeholder class supplies the visual block, and placeholder-glow or placeholder-wave adds the corresponding effect where supported. For example, use a placeholder span while a title loads. This styling does not fetch data or automatically replace itself with the loaded content. Options: None, This Element (placeholder), Container Glow (placeholder-glow), Container Wave (placeholder-wave). Default: no override from this control.

Border

Name	Description
Border	Adds or removes borders on selected sides using Bootstrap utilities. For example, border adds a border on every side and border-bottom adds only the bottom edge. Color and width are separate controls; choosing a color does not create a missing border. Options: All (border), None (border-0), Top (border-top), End (border-end), Bottom (border-bottom), Start (border-start), No Top (border-top-0), No End (border-end-0), No Bottom (border-bottom-0), No Start (border-start-0). Default: no override from this control.
Width	Sets the border-width utility. For example, border with border-2 uses the theme’s second border-width value. A visible border still needs a border style, supplied by a border utility or other CSS. Options: Default, 1px (border-1), 2px (border-2), 3px (border-3), 4px (border-4), 5px (border-5). Default: no override from this control.
Rounded	Chooses which corners receive the theme’s border radius. For example, rounded-top rounds the top corners and rounded-0 removes rounding. This changes corner shape; it does not add a border or clip overflowing children automatically. Options: Default, All (rounded), None (rounded-0), Top (rounded-top), End (rounded-end), Bottom (rounded-bottom), Start (rounded-start), Circle (rounded-circle), Pill (rounded-pill). Default: no override from this control.
Radius	Chooses the size or shape of the border radius. For example, rounded-pill creates strongly rounded ends on a button, while a numbered rounded utility uses the theme’s radius scale. A circle also needs equal width and height. Options: Default, Small (rounded-1), Medium (rounded-2), Large (rounded-3), X-Large (rounded-4), XX-Large (rounded-5). Default: no override from this control.
Border Color	Sets the border color through a theme utility such as border-primary. It affects existing borders, so combine it with a border utility when no border is visible. The actual color follows the project theme. Options: Default, Primary (border-primary), Primary Subtle (border-primary-subtle), Secondary (border-secondary), Secondary Subtle (border-secondary-subtle), Success (border-success), Success Subtle (border-success-subtle), Danger (border-danger), Danger Subtle (border-danger-subtle), Warning (border-warning), Warning Subtle (border-warning-subtle), Info (border-info), Info Subtle (border-info-subtle), Light (border-light), Light Subtle (border-light-subtle), Dark (border-dark), Dark Subtle (border-dark-subtle), Black (border-black), White (border-white). Default: no override from this control.

Spacing

Name	Description
Margin and Padding	Sets outer margin and inner padding utilities for the selected viewport breakpoint. For example, at MD, bottom margin 3 becomes mb-md-3; without a breakpoint, p-3 adds padding on every side. Start/End follow writing direction. The spacing scale comes from the project theme. Negative margin classes require a stylesheet built with negative-margin utilities enabled; the bundled default disables them. Options: mt-0, mt-1, mt-2, mt-3, mt-4, mt-5, mt-n1, mt-n2, mt-n3, mt-n4, mt-n5, mt-auto, mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-n1, mb-n2, mb-n3, mb-n4, mb-n5, mb-auto, ms-0, ms-1, ms-2, ms-3, ms-4, ms-5, ms-n1, ms-n2, ms-n3, ms-n4, ms-n5, ms-auto, me-0, me-1, me-2, me-3, me-4, me-5, me-n1, me-n2, me-n3, me-n4, me-n5, me-auto, mx-0, mx-1, mx-2, mx-3, mx-4, mx-5, mx-n1, mx-n2, mx-n3, mx-n4, mx-n5, mx-auto, my-0, my-1, my-2, my-3, my-4, my-5, my-n1, my-n2, my-n3, my-n4, my-n5, my-auto, m-0, m-1, m-2, m-3, m-4, m-5, m-n1, m-n2, m-n3, m-n4, m-n5, m-auto, pt-0, pt-1, pt-2, pt-3, pt-4, pt-5, pb-0, pb-1, pb-2, pb-3, pb-4, pb-5, ps-0, ps-1, ps-2, ps-3, ps-4, ps-5, pe-0, pe-1, pe-2, pe-3, pe-4, pe-5, px-0, px-1, px-2, px-3, px-4, px-5, py-0, py-1, py-2, py-3, py-4, py-5, p-0, p-1, p-2, p-3, p-4, p-5.
X Gutter	Sets the horizontal Bootstrap row gutter through a gx-* utility. For example, gx-3 changes the spacing between columns when applied to a Bootstrap row. It works through the row and column gutter rules; adding it to an unrelated element does not create a column layout. Options: 0 (gx-0), 1 (gx-1), 2 (gx-2), 3 (gx-3), 4 (gx-4), 5 (gx-5). Default: no override from this control.
Y Gutter	Sets the vertical Bootstrap row gutter through a gy-* utility. For example, gy-3 adds space between wrapped rows of columns. It does not replace padding inside a card or change the spacing of a non-grid element by itself. Options: 0 (gy-0), 1 (gy-1), 2 (gy-2), 3 (gy-3), 4 (gy-4), 5 (gy-5). Default: no override from this control.

Flex Item

Name	Description
Align Self	Overrides cross-axis alignment for this item within a flex container. For example, align-self-center centers a button vertically in a horizontal flex row. It requires a flex parent and is different from text alignment inside the button. Options: Start (align-self-start), Center (align-self-center), End (align-self-end), Stretch (align-self-stretch), Baseline (align-self-baseline).
Order	Changes visual ordering within a flex or grid layout without moving the element in the source. For example, order-first places an item before siblings with normal order. Keyboard and reading order still follow the document. Use supported classes: the bundled Bootstrap order scale contains 0–5 plus first/last; higher choices offered by an inspector need matching custom utilities. Options: First (first), 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, Last (last), D. Default: no override from this control.
Grow	Controls whether the item can consume free space along its flex parent’s main axis. flex-grow-1 allows growth; flex-grow-0 prevents it. For example, let a search field grow while its adjacent submit button keeps its content width. Growth does not guarantee equal widths when items have different bases. Options: Full (flex-grow-1), None (flex-grow-0). Default: no override from this control.
Shrink	Controls whether the item can shrink when its flex row lacks space. flex-shrink-0 preserves its basis and can cause overflow; flex-shrink-1 allows shrinking. For example, prevent a small icon from being squeezed while allowing the label beside it to shrink. Options: Full (flex-shrink-1), None (flex-shrink-0). Default: no override from this control.

Dynamic attributes

Name	Description
Label	Binds the displayed label on the child matched by `[data-role="label"]` to an App Connect expression using dmx-text. Choose the corresponding field from the scope shown by the Data Bindings picker. This replaces the target’s text content when the value changes; it is not a static caption or an HTML template. App Connect must be included. Keep the target child in the markup and check the visible result when the source is initially empty and after it loads.
Value	Binds the displayed value on the child matched by `[data-role="value"]` to an App Connect expression using dmx-text. Choose the corresponding field from the scope shown by the Data Bindings picker. This replaces the target’s text content when the value changes; it is not a static caption or an HTML template. App Connect must be included. Keep the target child in the markup and check the visible result when the source is initially empty and after it loads.
Icon Class	Binds the class attribute on the child matched by `[data-role="icon"]` to an App Connect expression. The result must be appropriate for that attribute. This updates an attribute; it does not save the value or execute an action. App Connect must be included. Keep the target child in the markup and check the visible result when the source is initially empty and after it loads.
Trend Text	Binds the displayed trend text on the child matched by `[data-role="trend"]` to an App Connect expression using dmx-text. Choose the corresponding field from the scope shown by the Data Bindings picker. This replaces the target’s text content when the value changes; it is not a static caption or an HTML template. App Connect must be included. Keep the target child in the markup and check the visible result when the source is initially empty and after it loads.

Check your result

You can select a setting, apply its documented value and check the relevant effect on the page.