Style Guide: Class Names for Editors
Headings & Text Sizes
a page should only have one real <h1>, and headings should stay in order (don't jump from Heading 1 straight to Heading 4). If you need something to look like a Heading 2 further down the page but it isn't really the next heading in order, use class="header2" on a regular paragraph instead of a real <h2> tag.
class="display" — the largest text style, meant for big hero headlines.
Heading 1 — use <h1> for a real heading, or class="header1"
Heading 2 — use <h2>, or class="header2"
Heading 3 — use <h3>, or class="header3"
Heading 4 — use <h4>, or class="header4"
Heading 5 — use <h5>, or class="header5"
Body Text — this is just a normal paragraph, no class needed.
class="caption" — small print, like a photo credit or fine print.
class="eyebrow" — a small label that sits above a headline
Buttons
Every button needs two classes: the word "btn", plus one color name from the list below — for example, class="btn primary-blue".
The two below are white, so you can only see them properly on a dark or blue background:
Call-to-Action Links (the arrow links)
These are the links with an arrow icon next to them, used for things like "Learn More" or "Get Started." Every one needs the word "cta" typed into the class box. You can add extra words after it to change the color or style — separate each word with a space.
cta cta blue cta outline cta blue outline
The two below are white, so you can only see them properly on a dark or blue background:
Regular Links (inside a sentence)
For a normal link inside a paragraph — not a big call-to-action button — just add your link like you normally would. No class is needed:
For example, this is what a normal link looks like — blue and underlined, automatically.
If you need a link to be a different color (to match text around it, for example), add one of the color classes below to just that link: