Typography

Inter font scale, headings, body text, lists, and text utilities.

Headings

h1. Trivoxa Admin Heading

h2. Trivoxa Admin Heading

h3. Trivoxa Admin Heading

h4. Trivoxa Admin Heading

h5. Trivoxa Admin Heading
h6. Trivoxa Admin Heading
Display Headings
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Lead & Body Text

This is a lead paragraph. It stands out from regular body text due to its larger size.

Regular body paragraph. Trivoxa uses the Inter variable font for crisp, modern legibility across all screen sizes and resolutions. The typeface supports weights from 100 to 900.

Small text. Used for captions, footnotes, and secondary information that should be de-emphasized.

Muted text. Used for metadata, timestamps, and helper descriptions.

Inline Text Elements

Highlighted text using the mark tag.

Deleted text using the del tag.

Strikethrough text using the s tag.

Inserted text using the ins tag.

Underlined text using the u tag.

Bold text using strong tag.

Italic text using em tag.

Small text using small tag.

Subscript: H2O — Superscript: E = mc2

Keyboard: Ctrl + C

Text Colors

Primary text color

Secondary text color

Success text color

Danger text color

Warning text color

Info text color

Muted text color

Dark text color

Font Weights

Weight 100 — Thin

Weight 300 — Light

Weight 400 — Regular

Weight 500 — Medium

Weight 600 — Semibold

Weight 700 — Bold

Weight 900 — Black

Text Alignment

Left aligned text

Center aligned text

Right aligned text

uppercase text

LOWERCASE TEXT

capitalize every word

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."

Steve Jobs, Apple

"First, solve the problem. Then, write the code."

John Johnson
Lists

Unordered

  • First item
  • Second item
  • Third item
    • Nested item

Ordered

  1. First item
  2. Second item
  3. Third item

Unstyled

  • Feature one
  • Feature two
  • Not included
Code

Inline code: const greeting = 'Hello, Trivoxa!';

// JavaScript example
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Admin'));