Typography

Basic typography system:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

code

Blockquotes are also available (although they are unstyled as of this writing)

And so is ^superscript and _subscript.

// Plus if you need more code
const you = 'can always write code blocks';

When authors need to specify or alter heading sizes, continue to use the appropriate semantic heading in the AEM document first. Then add a colon (similar to how we indicate icons), and a size modifier class of your choice. Because of CSS specificity, the heading modifier will target your semantic heading and apply the styles.

Example: If this was a heading and it needed to be styled like an H3 :size-l:

Available heading modifiers include:

• :size-xs: for 16px
• :size-s: for 18px
• :size-m: for 22px
• :size-l: for 28px
• :size-xl: for 36px
• :size-xxl: for 40px
• :size-xxxl: for 58px
• :size-xxxxl: for 73px

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6