Style guide
Shared typography and component checks using the current starter classes.
Text styles
Headings, display, body and the size scale, side by side so spacing is easy to judge.
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Display text
Default body text with strong emphasis, italic emphasis and enough copy to check comfortable line spacing across a few lines.
Extra extra small text
Extra small text
Small text
Medium text
Large text
Extra large text
Extra extra large text
Links in text
Inline links in running copy, including the editor-content wrapper.
A sentence with a default link inside the text.
A sentence with a dark link inside the text.
A sentence with a light link inside the text.
A sentence with a primary link inside the text.
A sentence with a secondary link inside the text.
Editor content with an automatically styled link.
Shortcodes
Add the real phone and hours shortcodes to these empty boxes.
- Mon:7:00am - 03:00pm
- Tue:7:00am - 03:00pm
- Mon:7:00am - 03:00pm
- Tue:7:00am - 03:00pm
Contact items
Two static links: single-line phone and multiline address, ready for dynamic values later.
Address line two
Address line two
Lists
Styled and numbered lists, including wrapping and nested items.
- A styled list item.
- A longer list item to check wrapping and alignment with the chevron.
-
A parent item.
- A nested colored bullet.
- Another nested bullet.
- The first step.
- A longer second step to check wrapping and alignment with its number.
-
A parent step.
- A nested step.
- Another nested step.
Icon badges
Default, small, large and interactive badges in one place.