Utah

As an admin, CMS tokens give you greater control and customization over your site’s content.

Tokens

Tokens work in any text field in the admin. Wrap the words in square brackets, then add one or more classes in curly braces: [words]{.class}

Token
Description
{.br}
Starts a new line. Everything after it moves down.
First lineSecond line

Classes

Stack as many classes as you like inside the braces, separated by spaces. For example: [words]{.primary .scribble}

Token
Description
[pop]{.primary}
Colors the words with the main accent color.
Make it pop
[pop]{.secondary}
Colors the words with the secondary color.
Make it pop
[bold]{.strong}
Makes the words bold.
Make it bold
[count]{.highlight}
Puts a solid accent color behind the words.
Make it count
[slanted]{.italic}
Slants the words.
Make it slanted
[$100]{.strike}
Draws a line through the words.
Was $100 now $80
[outlined]{.stroke}
Outlines the words and leaves the inside empty.
Make it outlined
[long phrase kept whole]{.nowrap}
Keeps the words together so they never split across two lines.
A long phrase kept whole
[glitch]{.glitch}
Scrambles the letters each time the words scroll into view.
Make it glitch
[count]{.underline}
Underlines the words.
Make it count
[count]{.scribble}
Draws a hand-drawn underline beneath the words as they scroll into view.
Make it count
[count]{.scribble-circle}
Draws a hand-drawn circle around the words as they scroll into view.
Make it count
[count]{.scribble-circle-tight}
A circle that sits closer to the words.
Make it count
[count]{.scribble-circle-wide}
A circle that sits farther from the words.
Make it count
[count]{.primary .scribble}
Combine classes by listing them in the same braces.
Make it count

Headings

Give any words the size and font of a heading. They are shown at body size here so the difference between levels is clear. This changes only how the words look, not the page's heading structure.

Token
Description
[Heading 1]{.h1}
The H1 size and font, without making the words a heading.
Heading 1
[Heading 2]{.h2}
The H2 size and font, without making the words a heading.
Heading 2
[Heading 3]{.h3}
The H3 size and font, without making the words a heading.
Heading 3
[Heading 4]{.h4}
The H4 size and font, without making the words a heading.
Heading 4
[Heading 5]{.h5}
The H5 size and font, without making the words a heading.
Heading 5
[Heading 6]{.h6}
The H6 size and font, without making the words a heading.
Heading 6