Text Semantics

Explore AiraCSS documentation for text utilities that control alignment, wrapping, weight, and more, empowering you to elevate your web design.

Text Alignment

Easily realign text to components with text alignment classes.

You can align text with the use of one of 4 classes

Class	Alignment
text-is-center	Makes the text centered
text-is-justify	Makes the text justified
text-is-left	Makes the text aligned to the left
text-is-right	Makes the text aligned to the right

Center aligned text 
Justify aligned text
Left aligned text
Right aligned text

Responsive variant include

• text-{breakpoint}-{value} for sm, md, lg,and xl.

Where value is one of: center,justify,left and right

Text wrapping and overflow

Wrap text with a .text-wrap class

Word Break

Prevent long strings of text from breaking your components' layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

This text should wrap.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Text transformation

You can transform text with the use of one of 5 classes

Class	Transformation
text-is-capitalized	Transforms the first character of each word to Uppercase
text-is-lowercase	Transforms all characters to lowercase
text-is-uppercase	Transforms all characters to UPPERCASE
font-style-italic	Transforms all characters to italic
text-is-underlined	Underlines the text

capitalized text.
LOWERCASE text.
uppercase text.

Font Size

We have 7 font sizes to choose from:

Class	Font-size
fs-1	2.9rem
fs-2	2.6rem
fs-3	2rem
fs-4	1.4rem
fs-5	1.25rem
fs-6	1rem
fs-7	0.75rem

.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
.fs-7 text

Responsive variant include

• fs-{value}-{breakpoint} for sm, md, lg,and xl.

Where value is one of: 1 to 7

Text Weight

You can transform the text weight with the use of one of 3 classes

Class	Weight
text-weight-light	Transforms text weight to light
text-weight-normal	Transforms text weight to normal
text-weight-bold	Transforms text weight to bold

.text-weight-light
.text-weight-normal
.text-weight-bold
.font-style-italic

Line Height

Change the line height with .lh-* utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.

Responsive variant include

• lh-{breakpoint}-{value} for sm, md, lg,and xl.

Where value is one of: 1 ,sm,base and lg

Text decoration

Decorate text in components with text decoration classes.

This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed

Light Headings

  
AiraCSS - Craft Beautiful Web Interfaces, One Class at a Time.
AiraCSS - Craft Beautiful Web Interfaces, One Class at a Time.
AiraCSS - Craft Beautiful Web Interfaces, One Class at a Time.
AiraCSS - Craft Beautiful Web Interfaces, One Class at a Time.
  

Small text

This is a h1 tag