Typography
<style> | Example Text | Use Cases |
|---|---|---|
h1, .h1 | A Really Nice Heading | The biggest headings |
h2, .h2 | A Really Nice Heading | Second biggest headings (that are always red!). Used for section intros. |
h3, .h3 | A Really Nice Heading |
|
h4, .h4 | A Really Nice Heading |
|
.the-menu .menu-heading.the-menu * |
| |
.footer .menu-heading.footer * |
| |
body | This is what the body / paragraph text looks like. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Body copy! |
.eyebrow | Who We Are | Used to indicate page title (very small) on secondary pages. These should likely use h1 tags for SEO. |
.button | Click Me! | Used on buttons! |
.announcement-bar__copy.h4.announcement-bar__copy.h4 div | Announcement bar heading. Same as the button text! Also some copy! | |
.violator a | Used for the "Read More" on violators! | |
.violator .violator__copy | Used for the large copy on violators! | |
.heading-number | 01., 02., 03. | Reserved for numbers associated with homepage sections. |
.breadcrumbs | Breadcrumbs / Example | Breadcrumbs (similar to largest heading style, but gets smaller on mobile) |
Logos
<style> | Example | Use Cases |
|---|---|---|
.logo | This is the primary logo, which is featured most prominently in the site's header. | |
.logo--black | This is the primary logo, which is featured most prominently in the site's header. | |
.logo--red | This version of the logo isn't currently used on the site. |