Text-level modifiers

In the realm of GCweb, text-level modifiers play a pivotal role in shaping the visual and functional aspects of website text. They enable web developers to fine-tune text attributes such as size, color, weight, and style, ensuring that the textual content is not only aesthetically pleasing but also accessible and easy to read.

.stretched-link

Used to make an entire containing block clickable, effectively "stretching" a hyperlink over the entire block. Make sure the element that you want to be clickable is positioned. This can be done by aping position: relative to an element.

<div class="positon-relative"><a class="stretched-link" href="#">Stretched link</a></div>

.small

Decreases the font size of the element.

Example small text

<p class="small">...</p>

.mark

Highlights the text.

Example highlighted text

<p class="mark">...</p>

.lead

Increases the font size and line height.

Example lead text

<p class="lead">...</p>

.nowrap

Prevents the text from wrapping.

<div class="row">
	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
		<div class="well">
			<p class="nowrap">Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		</div>
	</div>
</div>

.fnt-nrml

Resets the font-weight to normal.

The following element has a normal [font-weight].

<p>The following element has a normal <strong class="fnt-nrml">[font-weight]</strong>.</p>

.text-*

Can be used to align text or change its case.

.text-nowrap

Prevents the text from wrapping.

<div class="row">
	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
		<div class="well">
			<p class="text-nowrap">Example text: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		</div>
	</div>
</div>

Text alignment

.text-left

Aligned left

<p class="text-left">...</p>

.text-right

Aligned right

<p class="text-right">...</p>

.text-center

Aligned center

<p class="text-center">...</p>

.text-justify

Justified text. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas magnam odit tenetur veniam sed! Iusto adipisci eius autem magnam error. At hic alias earum, corrupti aspernatur culpa repudiandae aperiam amet labore magnam nemo praesentium a inventore accusantium quod velit quia nostrum ut aliquam ex debitis. Suscipit, inventore soluta? Aspernatur, illo!

<p class="text-justify">...</p>

Text transformation

.text-lowercase

Lowercase Text.

<p class="text-lowercase">Lowercase Text</p>

.text-uppercase

Uppercase Text.

<p class="text-uppercase">Uppercase Text</p>

.text-capitalize

capitalize text.

<p class="text-capitalize">capitalize text</p>