Typography

This section defines all text styles used across the system, ensuring clarity, consistency, and responsiveness.

Font Family

Font settings used to define the main typography roles across the system, including body, heading, and accent styles for consistent text presentation.
font-body
Body
font-heading
Heading
font-accent
Accent

Headings

Use headings to create a clear content hierarchy. Each page should have one H1, followed by H2–H6 as needed to guide the reader and support accessibility.
All H1 Headings

Heading 1

heading-style-h1
H1 Styled
All H2 Headings

Heading 2

heading-style-h2
H2 Styled
All H3 Headings

Heading 3

heading-style-h3
H3 Styled
All H4 Headings

Heading 4

heading-style-h4
H4 Styled
All H5 Headings
Heading 5
heading-style-h5
H5 Styled
All H6 Headings
Heading 6
heading-style-h6
H6 Styled

HTML Tags

No Style
This is some text inside of a div block.
All Bolds
Bold
All Italics
Italic
all paragraphs

This example content serves as a stand-in for actual writing that would typically appear in its place.

all ordered lists
  1. Placeholder for real content.
  2. Placeholder for real content.
  3. Placeholder for real content.
all unordered lists
  • Placeholder for real content.
  • Placeholder for real content.
  • Placeholder for real content.
All Links
All Superscripts
Superscript
All Subscripts
Subscript
all block quotes
Block Quote
All Code
</> Code
All Pre Tags
 - Code Block
<style> Light </style>
<style> Dark </style>

Text Styles

text-style-normal
Normal text inside of a div block.
text-style-italic
Italic text style
text-style-all-caps
All caps text inside of a div block.
text-style-capitalize-every-word
Capitalize every word text inside of a div block.
text-style-lowercase
Lowercase text inside of a div block.
text-style-strikethrough
Strikethrough text
text-style-underline
Underline text
text-style-letter-spacing-s
ABC
text-style-letter-spacing-m
ABC
text-style-letter-spacing-l
ABC
text-style-quote
Text style quote
text-style-ellipsis
This example content serves as a stand-in for actual writing that would typically appear in its place.
text-style-eyebrow
Eyebrow Text

Text Weight

text-weight-thin
Thin text weight - 100
text-weight-xlight
Extra light text weight - 200
text-weight-light
Light text weight - 300
text-weight-normal
Normal text weight - 400
text-weight-medium
Medium text weight - 500
text-weight-semi-bold
Semi-bold text weight - 600
text-weight-bold
Bold text weight - 700
text-weight-xbold
Extra bold text weight - 800
text-weight-black
Black text weight - 900

Text Alignment

Desktop
Tablet
Mobile
Mobile Portrait
text-align-left
Text align left.
tablet-text-align-left
Text align left on tablet.
mobile-text-align-left
Text align left on mobile.
mobile-portrait-text-align-left
Text align left on mobile portrait.
text-align-center
Text align center.
tablet-text-align-center
Text align center on tablet.
mobile-text-align-center
Text align center on mobile.
mobile-portrait-text-align-center
Text align center on mobile portrait.
text-align-right
Text align right.
tablet-text-align-right
Text align right on tablet.
mobile-text-align-right
Text align right on mobile.
mobile-portrait-text-align-right
Text align right on mobile portrait.
text-align-justify
Text align justify. This is a paragraph styled text example used to showcase how body content will appear on your website.
tablet-text-align-justify
Text align justify on tablet. This is a paragraph styled text example used to showcase how body content will appear on your website.
mobile-text-align-justify
Text align justify on mobile. This is a paragraph styled text example used to showcase how body content will appear on your website.
mobile-portrait-text-align-justify
Text align justify on mobile portrait. This is a paragraph styled text example used to showcase how body content will appear on your website.

Text Sizes

Desktop
text-size-upscale
This text is larger than the rest of the sentence.
text-size-xxl
Text Size XXL
text-size-xl
Text Size XL
text-size-l
Text Size L
text-size-m
Text Size M
text-size-regular
Text Size Default
text-size-s
Text Size S
text-size-tiny
Text Size Tiny
Tablet
Mobile
Mobile Portrait
Tablet-text-size-regular
Text Size Default
mobile-text-size-regular
Text Size Default
mobile-portrait-text-size-regular
Text Size Default
tablet-text-size-s
Text Size S
mobile-text-size-s
Text Size S
mobile-portrait-text-size-s
Text Size S
tablet-text-size-tiny
Text Size Tiny
mobile-text-size-tiny
Text Size Tiny
mobile-portrait-text-size-tiny
Text Size Tiny

Text Colors

text-color-primary
Primary
text-color-secondary
Secondary
text-color-tertiary
Tertiary
text-color-alternate
Alternate
text-color-success
Success
text-color-info
Info
text-color-warning
Warning
text-color-error
Error
text-color-white
White
text-color-black
Black
text-gradient-primary
Gradient Primary
text-gradient-secondary
Gradient Secondary
Transparent
text-color-transparent
Transparent

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph: This example content serves as a stand-in for actual writing that would typically appear in its place.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Italic text

Superscript

Subscript

Text Stroke Width

text-stroke-width-s

Stroke S

This is some text inside of a div block.
text-stroke-width-m

Stroke M

This is some text inside of a div block.
text-stroke-width-l

Stroke L

This is some text inside of a div block.

Text Stroke Colors

text-stroke-color-primary
Primary
This is some text inside of a div block.
text-stroke-color-secondary
Secondary
This is some text inside of a div block.
text-stroke-color-tertiary
Tertiary
This is some text inside of a div block.
text-stroke-color-alternate
Alternate
This is some text inside of a div block.
text-stroke-color-component-primary
Component
Primary
This is some text inside of a div block.
text-stroke-color-component-secondary
Component Secondary
This is some text inside of a div block.
text-stroke-color-component-tertiary
Component Tertiary
This is some text inside of a div block.
text-stroke-color-success
Success
This is some text inside of a div block.
text-stroke-color-info
Info
This is some text inside of a div block.
text-stroke-color-warning
Warning
This is some text inside of a div block.
text-stroke-color-error
Error
This is some text inside of a div block.
text-stroke-color-black
Black
This is some text inside of a div block.
text-stroke-color-white
White
This is some text inside of a div block.

Text Glow Colors

text-glow-primary

Primary

This is some text inside of a div block.
text-glow-secondary

Secondary

This is some text inside of a div block.
text-glow-tertiary

Tertiary

This is some text inside of a div block.
text-glow-alternate

Alternate

This is some text inside of a div block.
text-glow-success

Success

This is some text inside of a div block.
text-glow-info

Info

This is some text inside of a div block.
text-glow-warning

Warning

This is some text inside of a div block.
text-glow-error

Error

This is some text inside of a div block.

Text Shadow

shadow-text-sharp-s

Sharp S

This is some text inside of a div block.
shadow-text-sharp-m

Sharp M

This is some text inside of a div block.
shadow-text-sharp-l

Sharp L

This is some text inside of a div block.
shadow-text-blur-s

Blur S

This is some text inside of a div block.
shadow-text-blur-m

Blur M

This is some text inside of a div block.
shadow-text-blur-l

Blur L

This is some text inside of a div block.

Text Truncation

Utility-based text truncation using custom attributes to limit visible rows or characters without altering the original content.
Choose the truncation method that best fits your layout and content requirements.
Limit Text by Rows
This example content serves as a stand-in for actual writing that would typically appear in its place.
b-text-rows = #
Attribute: Change the "#" to match the number of rows you wish to display.
Limit Text by Characters (Word Safe)
This example content serves as a stand-in for actual writing that would typically appear in its place.
b-max-char = #
Attribute: Change the "#" to match the maximum number of characters you wish to display.
Limit Text by Characters (Mid-Word Cut)
This example content serves as a stand-in for actual writing that would typically appear in its place.
b-max-char = #
‍
b-text-cut = hard
Attribute: Change the "#" to match the maximum number of characters you wish to display.
Custom Behavior -
Text Truncation

This behavior limits text length using custom attributes.

Use b-text-rows to limit text by the number of visible rows. The behavior applies a line clamp so longer text is hidden after the defined number of lines. A fallback max-height is also calculated from the element’s line height when needed.

Use b-max-char to limit text by character count. If the text is longer than the defined limit, it is shortened and an ellipsis is added.

By default, character limiting avoids cutting words in the middle. Add b-text-cut = hard when the text should be cut exactly at the character limit, even if it breaks a word.

Use data-ellipsis to replace the default ellipsis with a custom suffix.