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.

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