Style tab basics

The Style tab on the right panel controls how a component looks: colors, typography, borders, and layout-related visual options.

Select a component

Style tab with font-weight bold CSS applied to the Contact details heading.Style tab with font-weight bold CSS applied to the Contact details heading.
  1. Click the heading or field on the canvas, or select sectionTitle or email in Tree (labeled Contact details and Email on the canvas).
  2. Click Style on the right.
  3. Enter CSS for the component (for example font-weight: bold; on a heading).
  4. Adjust other visual properties as needed (names depend on component type).

Common groups:

  • Typography, font size, weight
  • Colors, text, background, border
  • Spacing, margin, padding on layout components

Preview

Preview mode showing the bold Contact details heading and Email field.Preview mode showing the bold Contact details heading and Email field.
  1. Click Preview and confirm contrast and size on Mobile.

Developers: Programmatic styling and the Definer API are in Component styling.

See also