Typography & Style Guide

Quick reference for text styles, colors, and CSS components used throughout the theme.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs & Text

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a lead paragraph - larger for introductions.

This is small text for fine print and disclaimers.

Emphasis & Inline Styles

Bold text • Italic text • Underlined • Highlighted • Strikethrough • inline code

This is a standard link in text.

Unordered List

  • First item
  • Second item
    • Nested item
    • Another nested
  • Third item

Ordered List

  1. First step
  2. Second step
    1. Sub-step A
    2. Sub-step B
  3. Third step

Blockquotes

"This is a standard blockquote. Use for testimonials or to highlight important information."

— Author Name

Code

Inline: const value = "example";

// Code block
function example() {
  return "Hello, World!";
}

Tables

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Buttons

Apply these CSS classes to links or buttons:

Sizes

Alerts & Notices

Info: This is an informational alert.
Success: Operation completed successfully.
Warning: Please review before proceeding.
Error: Something went wrong.

Brand Colors

Primary
Secondary
Success
Warning
Danger
Info

Accordions (Native HTML)

Use <details> and <summary> in any rich text:

Click to expand

This content is hidden by default and revealed when clicked. No JavaScript required!

Open by default

Add the open attribute to have it expanded initially.