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.
Seeded defaults¶
| Property | Label | Class |
|---|---|---|
| Heading scale | Display 1 | cb-fs-d1 |
| Heading scale | Display 2 | cb-fs-d2 |
| Heading scale | Display 3 | cb-fs-d3 |
| Heading scale | Display 4 | cb-fs-d4 |
| Heading scale | Extra large | cb-fs-xl |
| Heading scale | Large | cb-fs-l |
| Heading scale | Medium | cb-fs-m |
| Heading scale | Small | cb-fs-s |
| Text color | White | text-white |
| Text color | Black | text-black |
| Alignment | Left | text-start |
| Alignment | Center | text-center |
| Alignment | Right | text-end |
Every Heading scale row also carries the cb-type-scale marker — see
For developers.
cb-fs-* is generated by canvas_builder_custom_type_scale_css(), since
the Custom engine loads no framework CSS of its own.
| Property | Label | Class |
|---|---|---|
| Heading scale | Display 1 | display-1 |
| Heading scale | Display 2 | display-2 |
| Heading scale | Display 3 | display-3 |
| Heading scale | Display 4 | display-4 |
| Heading scale | Extra large | fs-1 |
| Heading scale | Large | fs-2 |
| Heading scale | Medium | fs-4 |
| Heading scale | Small | fs-6 |
| Text color | White | text-white |
| Text color | Black | text-black |
| Alignment | Left | text-start |
| Alignment | Center | text-center |
| Alignment | Right | text-end |
| Property | Label | Class |
|---|---|---|
| Heading scale | Display 1 | text-8xl |
| Heading scale | Display 2 | text-7xl |
| Heading scale | Display 3 | text-6xl |
| Heading scale | Display 4 | text-5xl |
| Heading scale | Extra large | text-4xl |
| Heading scale | Large | text-3xl |
| Heading scale | Medium | text-xl |
| Heading scale | Small | text-base |
| Text color | Black | text-black |
| Text color | White | text-white |
| Text color | Gray | text-gray-600 |
| Text color | Primary | text-blue-600 |
| Alignment | Left | text-left |
| Alignment | Center | text-center |
| Alignment | Right | text-right |
Tailwind's shipped text-color table adds Gray and Primary rows the other
two profiles don't ship by default; its alignment classes use Tailwind's
own left/right naming rather than the logical start/end the other
two profiles use.
For developers¶
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().