The reason CSS isn't working is because the Contact Card is a Now Experience macroponent that uses Shadow DOM encapsulation. The CSS Styles panel in UI Builder applies styles to the component's host/wrapper element only — it cannot pierce into the shadow DOM to reach the internal field labels and values. That's why * { font-size: large; } has no effect on the secondary fields (Number, Location, Email) even though it looks correct syntactically.
Why Heading Style only affects the name: The Heading style property is explicitly wired to the contact name element inside the macroponent. The secondary content fields (subtitle, fields array) are rendered by separate child components with their own encapsulated styles, so changing the heading variant won't cascade to them.
How to actually change the font size of those fields:
The most reliable approach is to use CSS custom properties (design tokens) that the Now Experience component framework exposes. Unlike regular CSS selectors, CSS variables do inherit through the shadow DOM boundary. In the CSS Styles panel, instead of using font-size: large, try overriding the relevant Now Design System tokens on the host:
* {
--now-font-size--md: 18px;
--now-line-height--md: 1.4;
}
This works because the internal child components reference these token variables for their font sizing, and CSS custom properties naturally cross shadow DOM boundaries through inheritance.
If you want more granular control and the token override is too broad (it could affect other nested components), the alternative approaches are:
-
UX Component Presets (sys_ux_preset) — You can create a preset that targets the Contact Card's inner children with specific property overrides. Check the existing presets for now-contact-card in the sys_ux_macroponent table to see which child components render the fields, then create presets for those inner components.
-
Clone and customize the macroponent — Open the Contact Card macroponent definition (search sys_ux_macroponent for now-contact-card), examine its composition tree to see which child components render the field labels/values, and create your own variant with the styling you need. This gives full control but adds maintenance overhead.
-
Theme Styles (sys_ux_theme_style) — If this is a global change you want across your portal/workspace, you can override design tokens at the theme level rather than per-component.
To explore the component internals: Navigate to sys_ux_macroponent.list and search for the Contact Card. The composition tab shows the child component hierarchy and how properties are wired — that's where the relationship between Heading Style and the rendered output is configured. The sys_ux_lib_component table has the base component definitions, and sys_ux_preset holds any default property values.
Hope that helps — UI Builder's shadow DOM encapsulation is one of the trickiest parts for newcomers, but once you understand that CSS variables are the bridge across that boundary, a lot of styling challenges become straightforward.
I would recommend create a copy of the card component in ui builder and work on it.
