Text

A collection of useful text utility classes to style your content.

Text styles

FatKit offers various text utlities to style your text.

Class Description
.f-text-small Add this class to decrease the font size.
.f-text-large Add this class to increase the font size.
.f-text-bold Add this class to create bold (700) text. (legacy/deprecated)
.f-text-weight-extralight Adds font weight 200.
.f-text-weight-light Adds font weight 300.
.f-text-weight-regular Adds font weight 400.
.f-text-weight-medium Adds font weight 500.
.f-text-weight-semibold Adds font weight 600.
.f-text-weight-bold Adds font weight 700.
.f-text-weight-extrabold Adds font weight 800.
.f-text-weight-black Adds font weight 900.
.f-text-muted Add this class to mute your text.
.f-text-primary Add this class for additional text information.
.f-text-success Add this class to indicate success.
.f-text-warning Add this class to indicate a warning.
.f-text-danger Add this class to indicate danger.
.f-text-contrast This class makes the text color readable on flat color areas or pictures as it's often white.
.f-text-upper Add this class to make the text uppercase.
.f-text-lower add this class to make the text lowercase.
.f-text-case-none add this class to remove text case.

Text alignment

Add one of these useful classes to align your text.

Class Description
.f-text-left Aligns text to the left.
.f-text-left-medium Aligns text to the left on medium devices.
.f-text-left-large Aligns text to the left on large devices.
.f-text-right Aligns text to the right.
.f-text-right-medium Aligns text to the right on medium devices.
.f-text-right-large Aligns text to the right on large devices.
.f-text-center Centers text horizontally.
.f-text-center-medium Centers text horizontally on medium devices.
.f-text-center-large Centers text horizontally only on large.
.f-text-justify Justifies text.

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .f-text-left
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .f-text-right
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .f-text-center
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .f-text-center-small
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .f-text-center-medium
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .f-text-justify

Vertical alignment

Add one of these classes to vertically align text to an object.

Class Description
.f-text-top Aligns text to the top.
.f-text-middle Centers text vertically.
.f-text-bottom Aligns text to the bottom.

Example

Lorem ipsum.
Lorem ipsum.
Lorem ipsum.

Text wrapping

Add one of these useful classes to wrap your text.

Class Description
.f-text-truncate Prevents text from wrapping into multiple lines, truncating it instead.
.f-text-break Breaks strings if their length exceeds the width of their container.
.f-text-nowrap Prevents text from wrapping into multiple lines.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit .f-text-truncate
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit .f-text-break

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.

.f-text-nowrap

Font family

Sets the font family set in /assets/styles/base/_variables.scss

Class Description
.f-text-font-base Sets the font to $base-body-font-family.
.f-text-font-heading Sets the font to $base-heading-font-family.