Text

Table of Contents

Sizes
Text Sizes Sass API
Weights
Styles
Alignment
Wrap
Transform
Miscellaneous

Sizes

Utility classes for changing the font-size of text.

Utility	Rem	Px	Example
text-11	2.5rem	40px	The quick brown fox jumped over the lazy dog.
text-10	2.25rem	36px	The quick brown fox jumped over the lazy dog.
text-9	2rem	32px	The quick brown fox jumped over the lazy dog.
text-8	1.75rem	28px	The quick brown fox jumped over the lazy dog.
text-7	1.5rem	24px	The quick brown fox jumped over the lazy dog.
text-6	1.25rem	20px	The quick brown fox jumped over the lazy dog.
text-5	1.125rem	18px	The quick brown fox jumped over the lazy dog.
text-4	1rem	16px	The quick brown fox jumped over the lazy dog.
text-3	0.875rem	14px	The quick brown fox jumped over the lazy dog.
text-2	0.75rem	12px	The quick brown fox jumped over the lazy dog.
text-1	0.625rem	10px	The quick brown fox jumped over the lazy dog.

Snippet

<span className="text-11">The quick brown fox jumped over the lazy dog.</span>
<span className="text-10">The quick brown fox jumped over the lazy dog.</span>
<span className="text-9">The quick brown fox jumped over the lazy dog.</span>
<span className="text-8">The quick brown fox jumped over the lazy dog.</span>
<span className="text-7">The quick brown fox jumped over the lazy dog.</span>
<span className="text-6">The quick brown fox jumped over the lazy dog.</span>
<span className="text-5">The quick brown fox jumped over the lazy dog.</span>
<span className="text-4">The quick brown fox jumped over the lazy dog.</span>
<span className="text-3">The quick brown fox jumped over the lazy dog.</span>
<span className="text-2">The quick brown fox jumped over the lazy dog.</span>
<span className="text-1">The quick brown fox jumped over the lazy dog.</span>

Text Sizes Sass API

The map $font-sizes allows generating any number of text size variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend . to the key (e.g., .text-100).

Snippet

$bg-theme-colors: (
  text-100: (
    font-size: 100px,
  ),
  '%text-200': (
    font-size: 200px,
  ),
  '.text-200': (
    extend: '%text-200',
  ),
  '.text-250': (
    extend: '%text-200',
  ),
);

Outputs:

Snippet

.text-100 {
  font-size: 100px;
}

.text-200,
.text-250 {
  font-size: 200px;
}

Weights

Utility classes for changing the font-weight of text.

Utility	Value	Example
text-weight-lighter	lighter	The quick brown fox jumped over the lazy dog.
text-weight-light	300	The quick brown fox jumped over the lazy dog.
text-weight-normal	400	The quick brown fox jumped over the lazy dog.
text-weight-semi-bold	500	The quick brown fox jumped over the lazy dog.
text-weight-bold	700	The quick brown fox jumped over the lazy dog.
text-weight-bolder	900	The quick brown fox jumped over the lazy dog.

Snippet

<span className="text-weight-lighter"
  >The quick brown fox jumped over the lazy dog.</span
>
<span className="text-weight-light"
  >The quick brown fox jumped over the lazy dog.</span
>
<span className="text-weight-normal"
  >The quick brown fox jumped over the lazy dog.</span
>
<span className="text-weight-semi-bold"
  >The quick brown fox jumped over the lazy dog.</span
>
<span className="text-weight-bold"
  >The quick brown fox jumped over the lazy dog.</span
>
<span className="text-weight-bolder"
  >The quick brown fox jumped over the lazy dog.</span
>

Styles

Utility classes for changing the font-style of text.

Utility	Value	Example
text-italic	italic	The quick brown fox jumped over the lazy dog.
text-monospace	SFMono-Regular, Menlo, Monaco, Consolas, ‘Liberation Mono’, ‘Courier New’, monospace	The quick brown fox jumped over the lazy dog.

Snippet

<span className="text-italic"
  >The quick brown fox jumped over the lazy dog.</span
>
<span className="text-monospace"
  >The quick brown fox jumped over the lazy dog.</span
>

Alignment

Text Alignment Utilities set the text-align property. Only the left, right, and center values have responsive alignment, use the format text-{sm|md|lg|xl}-{left|right|center} to target specific screen sizes (e.g., text-md-center).

Utility	Value
text-justify	justify
text-left	left
text-right	right
text-center	center

Wrap

Text Wrap Utilities set the white-space property.

Utility	Value
text-wrap	normal
text-nowrap	nowrap

Transform

Text Transform Utilities set the text-transform property.

Utility	Value
text-lowercase	lowercase
text-uppercase	uppercase
text-capitalize	capitalize

Miscellaneous

Utility	Value
text-hide	background-color: transparent; border: 0; color: transparent; font: 0/0 a; text-shadow: none;
text-decoration-none	text-decoration: none !important;
text-break	overflow-wrap: break-word !important; word-wrap: break-word !important;

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Sizes
Text Sizes Sass API
Weights
Styles
Alignment
Wrap
Transform
Miscellaneous