Headings
Use headings in order — don’t skip a level just to get a certain size.
Heading One
Heading Two
Heading Three
Heading Four
<h1>–<h4>, no class required Paragraph & Inline Text
Drop cap
This is a paragraph with a drop cap. Lorem ipsum dolor sit amet consectetur adipiscing elit, quisque faucibus ex sapien vitae pellentesque sem placerat, in id cursus mi pretium tellus duis convallis.
<span class="drop-cap"> on the first letter Impact text
This is Impact Text
class="impact" on a <p> or <div> Everything else
Bold text
Italic text
Highlighted text
Centered text
This is small text
This is underlined text
This is strikethrough text
Here this is subscript and this is superscript
strong · em · highlight · center · small Blockquotes
This is a standard blockquote
<blockquote>, styled by the theme Breakouts, Pullouts & Extensions
Three classes that change how far an element reaches relative to the content column. All apply to any block-level element.
This paragraph uses class="extend". Good for wide media or code blocks that need more room than the text column allows.
class="extend" — widen beyond the text column This paragraph uses class="breakout".
class="breakout" — stand apart from the flow of text This paragraph uses class="pullout".
class="pullout" — pull a short excerpt out of the copy Lists
Numbered
- Black
- Red
- Blue
Bullet
- Black
- Red
- Blue
<ol> / <ul> Callouts
Turn any <p> or <div> into a callout with the callout class. Add note or alert for contextual meaning.
Basic Callout
General-purpose callout with no special meaning attached.
class="callout" Note Callout
Use for helpful, non-urgent context.
class="callout note" Alert Callout
Use to flag something that needs attention.
class="callout alert" Bleeds
A bleed is a full-browser-width colored section. Click a swatch to copy its class.
div.bleed.{color} > div.container > div.page-content.text