Styles

Style controls a component's look — background, spacing, typography. For a Section's band and column layout (width, height, gap, alignment), see Toolbar.

Every component instance gets a Style tab with a fixed set of style groups — Background, Spacing, Typography — and a separate Motion tab if the optional canvas_builder_motion submodule is enabled (see Motion). Each group is YAML-driven and stores author- configured utility class strings, never generated breakpoint grammar, so the same panel works whether the site runs Bootstrap, Tailwind, or a custom framework — see Frameworks.

Every value here is per viewport, resolved mobile-first (a viewport with no entry inherits the nearest narrower one), and rides Canvas's own draft → publish → revision lifecycle. Switching the device picker re-points every control to that viewport's stored value.

The device picker in the toolbar — every style panel below re-points to it.

Background

Color, image, or video, each on its own tab, plus an overlay over image/video.

• Color — a swatch-backed dropdown (bg_color_classes) of utility classes.
• Image / Video — pick media from the Media library (background_image_bundles / background_video_bundles control which bundles are offered).
• Overlay — color, opacity, and blend mode over an image or video, so a photo can sit under readable text without a second component. Overlay values are per viewport too — a photo can go clean on mobile and gain a dark overlay at desktop.

Only one bg type — color, image, or video — is active per viewport at a time; picking a new tab replaces the previous one for that viewport rather than layering them.

Spacing

Padding and margin, each as an interactive box-model diagram rather than a plain class dropdown.

• Pattern buttons — All sides / Vertical / Horizontal / Custom, plus Reset — choose how many independent values you're setting before you touch the diagram.
• Click-to-cycle badges — each side of the box shows its current size in px; clicking a badge steps to the next configured size, so no dropdown or typing is needed for the common case.
• Center-block — on Margin only, a toggle for the common margin-inline: auto pattern.

Per-side classes (pt-*, pr-*, pb-*, pl-*, or the axis tokens px-* / py-* when opposite sides match) are derived in the browser from the single configured class list (padding_classes / margin_classes) using the framework's side-letter map — a Bootstrap site derives pt-/pe-, a Tailwind site the same pt-/pr-. Because those per-side names are generated at runtime, they appear in no source file a Tailwind build can scan; the admin Tailwind Safelist export (see Frameworks) includes them so a purge build doesn't drop them silently.

Typography

Heading scale, text color and alignment, applied to the component wrapper.

• Heading scale — a dropdown (heading_scale_classes) sizing the headings inside the component. See For developers for how the class actually reaches the heading if you're adding your own size options.
• Text color — a swatch-backed dropdown (text_color_classes), the same control style as Background's color tab.
• Alignment — icon buttons (text_align_classes) for the configured alignment options.

Gradients

Gradients are rows in the background color table rather than a separate control, because that is how the frameworks model them: Bootstrap's bg-gradient only layers a translucent gradient over whatever background color accompanies it, so it ships paired (bg-dark bg-gradient). Tailwind has no single composable class at all — a gradient is a direction plus color stops (bg-linear-to-b from-gray-800 to-gray-950), which is likewise one row. Both spellings are just class strings; the engine concatenates them unchanged.

A fully-justified option is deliberately not shipped by default — it fails WCAG 2.1 SC 1.4.8 (Level AAA) for body text — but if your site's admin adds one, the panel surfaces an in-context note explaining the trade-off rather than silently allowing it.

Enable/disable any style

Every group, tab, and child above can be turned off — globally, or per component (a card can offer Spacing but not Background video) — with zero JS/CSS shipped for a disabled option.

Configuration → Content authoring → Canvas Builder → Styles

Extending

Background, Spacing, and Typography are the built-in set, but they're defined the same way a contrib or custom addition would be — YAML plus a settings_key resolving to a config-stored option table. Three levels, covered in full in Extending:

• A new option in an existing group (another background color, another heading size) — a row in that group's option table, no code.
• A whole new style group — a {provider}.canvas_builder_styles.yml file in your own theme or module, no PHP required. See Style definitions via {provider}.canvas_builder_styles.yml.
• An entirely custom widget — a new style type (not just a new group using select/media/overlay/box_model), which does need a small PHP service. See Custom style types.

Config keys without an admin form

One canvas_builder.settings key is swapped by a framework-profile switch but never edited in a form:

Key	Purpose	Default (Custom profile)
spacing_side_map	The letter the box-model editor inserts after p/m for each side (top, right, bottom, left, x, y), so an all-sides p-3 row derives pt-3, pr-3, … Bootstrap ships logical right: e / left: s.	{top: t, right: r, bottom: b, left: l, x: x, y: y}

drush config:set canvas_builder.settings spacing_side_map.right e

For developers

How Heading scale reaches the heading

Font-size utilities (display-1, fs-2, Tailwind text-7xl) size the element they sit on, and Canvas Builder puts style classes on a wrapper <div> — so on its own such a class would style nothing. Each shipped row therefore pairs the framework class with a cb-type-scale marker:

- label: 'Display 1'
  classes:
    mobile: 'cb-type-scale display-1'

The marker pulls in one rule (assets/frontend/type-scale/type-scale.css) that sets font-size: 1em on headings inside the wrapper, so they adopt the wrapper's computed size. It is written with :where() — zero specificity — so a size class on the heading itself, or your theme's own rule, still wins. No sizes are declared by Canvas Builder: the framework utility remains the only thing choosing the scale. Line-height is deliberately left alone, since heading leading is unitless in every shipped profile and re-derives from the new size.

If you add a row to this table for another framework, include cb-type-scale alongside your own class or the size will not reach the heading. The Custom (css_vars) profile loads no framework CSS, so it ships its own cb-fs-* scale from canvas_builder_custom_type_scale_css().