Text

Kelp includes a handful of utility functions for modifying text.

Case

The .text-capitalize, .text-uppercase, and .text-lowercase classes convert text into title case, uppercase, and lowercase, respectively.

Hey there, friend!
Hey there, friend!
Hey there, friend!

<span class="text-capitalize">Hey there, friend!</span>
<span class="text-uppercase">Hey there, friend!</span>
<span class="text-lowercase">Hey there, friend!</span>

Wrapping

The .text-pretty class sets a value of text-wrap: pretty, which attempts to reduce orphan text.

the .text-balance class sets a value of text-wrap: balance, which tries to distribute text evenly over multiple lines.

Both use relatively slow algorithms, and are best used selectively for headers or specific body copy rather than being applied to everything on a page.

.text-pretty: Magic Merlin's might may multiply his majestic magnificence.

.text-balance: Magic Merlin's might may multiply his majestic magnificence.

<h3 class="text-pretty">Magic Merlin's might...</h3>
<h3 class="text-balance">Magic Merlin's might...</h3>

Alignment

The .text-center and .text-end classes center text or align it at the end of it’s parent element, respectively.

<div class="text-center">This text is centered.</div>
<div class="text-end">This text is aligned to the end.</div>

Muted

The .text-muted class applies a light gray color to text.

I am muted.

<p class="text-muted">I am muted.</p>

You can adjust the shade and color by setting the --color-text-muted CSS variable in the kelp.theme cascade layer.

@layer kelp.theme {

	/* Light Theme (default) */
	:where(:root),
	.kelp-theme-light {
		--color-text-muted: var(--color-gray-50);
	}

	.kelp-theme-dark {
		--color-text-muted: var(--color-gray-80);
	}

}

Color

The .text-color class gives text a color.

It can be paired with the .primary, .secondary, .success, .danger, and .warning classes. Without one of those classes, the text is black.

.text-color
.text-color .primary
.text-color .secondary
.text-color .success
.text-color .danger
.text-color .warning

<span class="text-color">.text-color</span>
<span class="text-color primary">.text-color .primary</span>
<span class="text-color secondary">.text-color .secondary</span>
<span class="text-color success">.text-color .success</span>
<span class="text-color danger">.text-color .danger</span>
<span class="text-color warning">.text-color .warning</span>

Font Family

The .font-primary and .font-secondary classes set the font-face to your primary or secondary font family, respectively.

This is regular text that's using the secondary font, usually applied to headings.

This is a heading that's using the primary font, usually used for body text.

<p class="font-secondary">This is regular text that's...</p>
<h3 class="font-primary">This is a heading that's...</h3>