Utilities - Text
Use common text utilities to control alignment, wrapping, weight, and more.
Text Alignment
Use text alignment utilities to easily align text in components.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
This text is left aligned.
This text is center aligned.
This text is right aligned.
`For left, right, and center alignment, Inkline provides you with responsive classes that use the same breakpoints as the grid system.
Center aligned text starting from xs viewport size.
Center aligned text starting from sm viewport size.
Center aligned text starting from md viewport size.
Center aligned text starting from lg viewport size.
Center aligned text starting from xl viewport size.
Center aligned text starting from xxl viewport size.
You can use the following text alignment utility classes:
_text-align:left
or_text:left
_text-align:center
or_text:center
_text-align:right
or_text:right
_text-align:justify
or_text:justify
_{xs|sm|md|lg|xl|xxl}:text-align:left
or_{xs|sm|md|lg|xl|xxl}:text:left
_{xs|sm|md|lg|xl|xxl}:text-align:center
or_{xs|sm|md|lg|xl|xxl}:text:center
_{xs|sm|md|lg|xl|xxl}:text-align:right
or_{xs|sm|md|lg|xl|xxl}:text:right
Text Wrapping and Overflow
You can wrap text using the _white-space:normal
utility class.
This text should wrap.
You can also prevent text from wrapping with a _white-space:nowrap
utility class.
This text should overflow the parent.
Text wrapping utilities also come with breakpoint-specific classes, same as text alignment classes.
For longer content, adding the _text:truncate
utility class will truncate the text with an ellipsis. Truncation requires display: inline-block
or display: block
.
You can use the following white space utility classes:
_white-space:normal
or_text:wrap
_white-space:nowrap
or_text:nowrap
_text:truncate
_{xs|sm|md|lg|xl|xxl}:white-space:normal
or_{xs|sm|md|lg|xl|xxl}:text:wrap
_{xs|sm|md|lg|xl|xxl}:white-space:nowrap
or_{xs|sm|md|lg|xl|xxl}:text:nowrap
_{xs|sm|md|lg|xl|xxl}:text:truncate
Word Break
Prevent long strings of text from breaking your layout by using _text:break-word
. Behind the scenes, it uses overflow-wrap: break-word
and word-break: break-word
for IE & Edge compatibility.
Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass
You can use the following word break utility classes:
_text:break-word
Text Transform
You can transform text in components using text capitalization classes.
This text is lowercase.
This text is uppercase.
This text is capitalized.
You can use the following text transform utility classes:
_text-transform:lowercase
or_text:lowercase
_text-transform:uppercase
or_text:uppercase
_text-transform:capitalize
or_text:capitalize
Font Weights and Italics
You can change the weight (boldness) of your text italicize it using these utility classes.
Extralight text.
Light text.
Normal text.
Semibold text.
Bold text.
Black text.
Lighter weight text (relative to the parent element).
Bolder weight text (relative to the parent element).
Italic text.
You can use the following font weight and style utility classes:
_font-weight:extralight
or_text:extralight
_font-weight:light
or_text:light
_font-weight:normal
or_text:normal
_font-weight:semibold
or_text:semibold
_font-weight:bold
or_text:bold
_font-weight:black
or_text:black
_font-weight:lighter
or_text:lighter
_font-weight:bolder
or_text:bolder
_font-style:italic
or_text:italic
Font Size
Change your font size using one of the font-size utilities.
Extra-small text.
Small text.
Medium text.
Large text.
Extra-large text.
You can use the following font weight utility classes:
_font-size:xs
or_text:xs
_font-size:sm
or_text:sm
_font-size:md
or_text:md
_font-size:lg
or_text:lg
_font-size:xl
or_text:xl
Monospace
Change your text to be monospaced using the _font-family:monospace
utility.
This text is monospace.
You can use the following font weight utility classes:
_font-family:monospace
or_text:monospace
Text Decoration
Remove text decoration using the _text-decoration:none
utility.
You can use the following text decoration utility classes:
_text-decoration:none
Muted Text
Make your text stand out less using the _text:muted
utility.
This text is muted.
You can use the following text muted utility classes:
_text:muted
or_color:muted
Text Reset
Make your text or link inherit the parent’s color using the _text:reset
utility.
This text is muted and has a text reset link.
You can use the following text reset utility classes:
_text:reset
Text Hide
You can make your text disappear without hiding the element by using the text-indent: -10000px
trick. This is available through the following utility class:
_text:hide
Lists
You can use list utilities to obtain inline and unstyled lists.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at