A text styling wrapper with variant-based typographic styles.
Heading 1 — The quick brown fox jumps over the lazy dog.Heading 2 — The quick brown fox jumps over the lazy dog.Heading 3 — The quick brown fox jumps over the lazy dog.Heading 4 — The quick brown fox jumps over the lazy dog.Heading 5 — The quick brown fox jumps over the lazy dog.Heading 6 — The quick brown fox jumps over the lazy dog.Subtitle 1 — The quick brown fox jumps over the lazy dog.Subtitle 2 — The quick brown fox jumps over the lazy dog.Body 1 — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. Sphinx of black quartz, judge my vow.Body 2 — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. Sphinx of black quartz, judge my vow.Caption — The quick brown fox jumps over the lazy dog.Overline — The quick brown fox jumps over the lazy dog.Small — The quick brown fox jumps over the lazy dog.The only way to do great work is to love what you do. — Steve Jobsconst greeting = "Hello, world!"; function add(a, b) { return a + b; }Ctrl + Shift + P
Gradient text
The first heading follows the theme: pick a preset in the bar at the top. The others set
--x-typography-gradient.
Theme gradient
Your own colours
Centred, the gradient spans the textA longer heading that wraps runs one gradient across its linesMoving through the text part
Property API
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. Sphinx of black quartz, judge my vow. The five boxing wizards jump quickly. Jackdaws love my big sphinx of quartz.