Sadrazam – Typography Showcase

Headings, font sizes, weights, families, alignment, transform, decoration and text colors

Headings

Native HTML heading elements h1 through h6, styled in base/_typography.scss

H1

Heading One

h1 — var(--fsi-35), 700

H2

Heading Two

h2 — var(--fsi-28), 600

H3

Heading Three

h3 — var(--fsi-24), 600

H4

Heading Four

h4 — var(--fsi-21), 600

H5

Heading Five

h5 — var(--fsi-19), 600

H6

Heading Six

h6 — var(--fsi-17), 600

Paragraph & Inline Elements

Standard paragraph, code, pre and blockquote elements from base/_typography.scss

Paragraph

The quick brown fox jumps over the lazy dog. This is a standard paragraph element with default line-height and letter-spacing applied globally.

<p>

Inline Code

Use the font-size property to set text size.

<code>

Pre Block

const greeting = "Hello, world!";
console.log(greeting);

<pre>

Blockquote

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

<blockquote>

Font Families

Utility classes for switching font family — defined in base/_fonts.scss

Sans-Serif

The quick brown fox jumps over the lazy dog.

.ffa-sans

Serif

The quick brown fox jumps over the lazy dog.

.ffa-serif

Monospace

The quick brown fox jumps over the lazy dog.

.ffa-mono

Font Weights

Utility classes for font-weight — from base/_fonts.scss

Light (300)

The quick brown fox jumps over the lazy dog.

.fwe-light

Regular (400)

The quick brown fox jumps over the lazy dog.

.fwe-regular

Medium (500)

The quick brown fox jumps over the lazy dog.

.fwe-medium

Semibold (600)

The quick brown fox jumps over the lazy dog.

.fwe-semibold

Bold (700)

The quick brown fox jumps over the lazy dog.

.fwe-bold

Extrabold (800)

The quick brown fox jumps over the lazy dog.

.fwe-extrabold

Font Sizes

Responsive clamp-based size scale using .fsi-{n} classes — from base/_fonts.scss

fsi-10 The quick brown fox .fsi-10

fsi-11 The quick brown fox .fsi-11

fsi-12 The quick brown fox .fsi-12

fsi-13 The quick brown fox .fsi-13

fsi-14 The quick brown fox .fsi-14

fsi-15 The quick brown fox .fsi-15

fsi-16 The quick brown fox .fsi-16

fsi-17 The quick brown fox .fsi-17

fsi-18 The quick brown fox .fsi-18

fsi-19 The quick brown fox .fsi-19

fsi-20 The quick brown fox .fsi-20

fsi-21 The quick brown fox .fsi-21

fsi-22 The quick brown fox .fsi-22

fsi-24 The quick brown fox .fsi-24

fsi-28 The quick brown fox .fsi-28

fsi-32 The quick brown fox .fsi-32

fsi-35 The quick brown fox .fsi-35

fsi-40 The quick brown fox .fsi-40

fsi-45 The quick brown fox .fsi-45

Icon Sizes

Phosphor icon scaling classes — from base/_fonts.scss

Default (no class)

Icon LG .ficon-lg (1.5em)

Icon 2x .ficon-2x (2em)

Icon 3x .ficon-3x (3em)

Icon 4x .ficon-4x (4em)

Icon 5x .ficon-5x (5em)

Text Alignment

Alignment utility classes from utilities/_typography.scss

Left

Left-aligned text content.

.text-left

Center

Center-aligned text content.

.text-center

Right

Right-aligned text content.

.text-right

Justify

Justified text stretches each line so that both the left and right edges are flush with the container boundaries, creating a clean block of text that looks more like a printed column.

.text-justify

Text Transform

Transform and wrapping utilities from utilities/_typography.scss

Uppercase The quick brown fox jumps over the lazy dog. .text-uppercase

Lowercase THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. .text-lowercase

Capitalize the quick brown fox jumps over the lazy dog. .text-capitalize

Initialism html css scss .text-uppercase

No Wrap

This text will never wrap to a new line regardless of container width.

.text-nowrap

Text Decoration

Underline utility classes from utilities/_typography.scss

Underline This text is always underlined. .text-underline

Underline Hover Hover over this text to see the underline. .text-underline-hover

Text Colors — Light Theme

Text color utility classes from base/_colors-main.scss

Black

Sample Text

.tc-text-black

Dark Primary

Sample Text

.tc-text-dark-1

Dark Secondary

Sample Text

.tc-text-dark-2

Dark Hint

Sample Text

.tc-text-dark-3

Dark Divider

Sample Text

.tc-text-dark-4

Link Blue

Sample Link

.tc-link-blue-dark

Text Colors — Theme Colors

Brand color text classes from theme/_colors-pri.scss, _colors-sec.scss, _colors-ter.scss

Primary Light

Sample Text

.tc-pri-300

Primary Base

Sample Text

.tc-pri-500

Primary Dark

Sample Text

.tc-pri-700

Secondary Light

Sample Text

.tc-sec-300

Secondary Base

Sample Text

.tc-sec-500

Secondary Dark

Sample Text

.tc-sec-700

Tertiary Light

Sample Text

.tc-ter-300

Tertiary Base

Sample Text

.tc-ter-500

Tertiary Dark

Sample Text

.tc-ter-700

Text Colors — Interaction / Status

Semantic status text colors from base/_colors-main.scss

Safe 500

Success

.tc-safe-500

Safe 800

Success Dark

.tc-safe-800

Notice 500

Informational

.tc-notice-500

Notice 800

Info Dark

.tc-notice-800

Caution 500

Caution

.tc-caution-500

Caution 800

Caution Dark

.tc-caution-800

Warning 500

Warning

.tc-warning-500

Warning 800

Warning Dark

.tc-warning-800

Danger 500

Danger

.tc-danger-500

Danger 800

Danger Dark

.tc-danger-800

Text Colors — Dark Background

Light-on-dark text color classes, best used on dark backgrounds

White

Sample Text

.tc-text-white

Light Primary

Sample Text

.tc-text-light-1

Light Secondary

Sample Text

.tc-text-light-2

Light Hint

Sample Text

.tc-text-light-3

Light Divider

Sample Text

.tc-text-light-4

Constant White

Always White

.tc-text-white--f

Constant Black

Always Black

.tc-text-black--f

Combined Example

Mixing multiple typography utilities on the same element

Heading Style

Serif Bold Heading

.fsi-28 .fwe-bold .ffa-serif .tc-pri-700

Caption Style

Small uppercase caption text

.fsi-11 .fwe-medium .text-uppercase .tc-text-dark-3

Code Style

const x = 42;

.fsi-14 .ffa-mono .tc-danger-500

Label Style

verified account

.fsi-12 .fwe-semibold .text-uppercase .tc-safe-800

Underline Link

Click here for details

.fsi-15 .fwe-medium .text-underline .tc-link-blue-dark