Sizes

Utility classes for changing the font-size of text.

<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).

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

Outputs:

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

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

Weights

Utility classes for changing the font-weight of text.

<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.

<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).

Wrap

Text Wrap Utilities set the white-space property.

Transform

Text Transform Utilities set the text-transform property.

Miscellaneous