Text
Comprehensive documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Text Alignment
Easily realign text within components using text alignment classes. These classes allow you to control the alignment of text for different viewport sizes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
End aligned text on viewports sized "small" or wider.
End aligned text on viewports sized "medium" or wider.
End aligned text on viewports sized "large" or wider.
End aligned text on viewports sized "xlarge" or wider.
End aligned text on viewports sized "2xlarge" or wider.
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="small:text-end">End aligned text on viewports sized "<b>small</b>" or wider.</p>
<p class="medium:text-end">End aligned text on viewports sized "<b>medium</b>" or wider.</p>
<p class="large:text-end">End aligned text on viewports sized "<b>large</b>" or wider.</p>
<p class="xlarge:text-end">End aligned text on viewports sized "<b>xlarge</b>" or wider.</p>
<p class="2xlarge:text-end">End aligned text on viewports sized "<b>2xlarge</b>" or wider.</p>Note: We do not provide utility classes for justified text. While justified text might look more visually appealing, it can result in uneven word spacing, making it harder to read.
Text Wrapping & Overflow
Wrap text within a container using the .text-wrap class. This ensures that text will break into multiple lines if it exceeds the container's width.
<div class="badge primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Prevent text from wrapping by applying the .text-nowrap class. This is useful when you want text to remain on a single line, even if it overflows the container.
<div class="text-nowrap bg-evident border" style="width: 8rem;">
This text should overflow the parent.
</div>Word Break
Prevent long strings of text from breaking your layout by using the .text-break class. This class applies word-wrap: break-word and word-break: break-word to ensure long words or strings break appropriately. We use word-wrap for broader browser support and include the deprecated word-break: break-word to avoid issues with flex containers.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Note that Breaking words isn’t possible in Arabic, the most widely used RTL language. As a result, .text-break is removed from our RTL-compiled CSS.
Text Transform
Transform text within components using text capitalization classes: text-lowercase, text-uppercase, or text-capitalize.
Lowercased Text
uppercased text
capitalized text
istanbul
İSTANBUL
istanbul
<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>
<p class="text-uppercase" lang="tr">istanbul</p>
<p class="text-lowercase" lang="tr">İSTANBUL</p>
<p class="text-capitalize" lang="tr">istanbul</p>Note that .text-capitalize only changes the first letter of each word, leaving the case of other letters unaffected. Unfortunately, .text-capitalize does not work for locales, even when the HTML lang attribute is specified.
Font Size
Quickly adjust the size of text using .text-large and .text-small classes. These classes allow you to scale text up or down for better emphasis or readability.
Easily make text larger or smaller to suit your design needs.
Easily make text larger or smaller to suit your design needs.
<p class="font-large">Easily make text <span class="text-large">larger</span> or <span class="text-small">smaller</span> to suit your design needs.</p>
<p class="font-small">Easily make text <span class="text-large">larger</span> or <span class="text-small">smaller</span> to suit your design needs.</p>Font Weight & Style
Beside token definitions, you can use standard font weights and styles by .text-* utilities.
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Medium weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
<p class="text-bold">Bold text.</p>
<p class="text-bolder">Bolder weight text (relative to the parent element).</p>
<p class="text-semibold">Semibold weight text.</p>
<p class="text-medium">Medium weight text.</p>
<p class="text-regular">Normal weight text.</p>
<p class="text-light">Light weight text.</p>
<p class="text-lighter">Lighter weight text (relative to the parent element).</p>
<p class="text-italic">Italic text.</p>
<p class="text-normal">Text with normal font style</p>Line height
Adjust the line height text using .text-lh-* utility classes.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
<p class="text-lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="text-lh-small">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="text-lh-medium">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="text-lh-large">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>Monospace
Apply the monospace font stack to text using the .text-monospace utility class.
This is in monospace
<p class="text-monospace">This is in monospace</p>Text Decoration
Use .text-decoration-* classes to easily apply or remove text decorations.
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>Text Truncation
For longer content, add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
This text is quite long, and will be truncated once displayed.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
This text is quite long, and will be truncated once displayed.
</span>CSS
This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.
Sass variables
Base font related Sass variables, keeping token references as CSS variables.
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
$font-size-root: null; // 2vw;
$font-size-root-large: $font-size-root; // 1vw; // for media-breakpoint-up(large)
$font-size-root-small: $font-size-root; // 4vw; // for media-breakpoint-down(small)
$text-align: null;
// $font-size-base affects the font size of the body text
$font-size-base: var(--#{$prefix}font-size-medium); // Assumes the browser default, typically `16px`
$font-family-base: var(--#{$prefix}font-family-text);
$font-weight-base: var(--#{$prefix}font-weight-normal);
$line-height-base: var(--#{$prefix}line-height-medium);
$font-size-5xlarge: var(--#{$prefix}font-size-text-5xlarge);
$font-size-4xlarge: var(--#{$prefix}font-size-text-4xlarge);
$font-size-3xlarge: var(--#{$prefix}font-size-text-3xlarge);
$font-size-2xlarge: var(--#{$prefix}font-size-text-2xlarge);
$font-size-xlarge: var(--#{$prefix}font-size-text-xlarge);
$font-size-large: var(--#{$prefix}font-size-text-large);
$font-size-medium: var(--#{$prefix}font-size-text-medium);
$font-size-small: var(--#{$prefix}font-size-text-small);
$font-size-xsmall: var(--#{$prefix}font-size-text-xsmall);
$font-size-2xsmall: var(--#{$prefix}font-size-text-2xsmall);
$font-weight-normal: var(--#{$prefix}font-weight-text-normal);
$font-weight-strong: var(--#{$prefix}font-weight-text-strong);
$font-weight-mass: var(--#{$prefix}font-weight-text-mass);
$font-weight-elegant: var(--#{$prefix}font-weight-text-elegant);
$line-height-5xlarge: var(--#{$prefix}line-height-text-5xlarge);
$line-height-4xlarge: var(--#{$prefix}line-height-text-4xlarge);
$line-height-3xlarge: var(--#{$prefix}line-height-text-3xlarge);
$line-height-2xlarge: var(--#{$prefix}line-height-text-2xlarge);
$line-height-xlarge: var(--#{$prefix}line-height-text-xlarge);
$line-height-large: var(--#{$prefix}line-height-text-large);
$line-height-medium: var(--#{$prefix}line-height-text-medium);
$line-height-small: var(--#{$prefix}line-height-text-small);
$line-height-xsmall: var(--#{$prefix}line-height-text-xsmall);
$line-height-2xsmall: var(--#{$prefix}line-height-text-2xsmall);
$small-font-size: .875em;
$large-font-size: 1.25em;
$initials-font-size: $small-font-size;
$small-line-height: 1.25em;
$medium-line-height: 1.5em;
$large-line-height: 2em;
$sub-sup-font-size: .75em;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
Sass maps
Most font utilities are generated from this maps, in combination utilities API.
$font-families: (
"text": $font-family-text,
"display": $font-family-display,
"code": $font-family-code,
"html": $font-family-html,
"icon": $font-family-icon,
);
$font-sizes: (
"5xlarge": $font-size-5xlarge,
"4xlarge": $font-size-4xlarge,
"3xlarge": $font-size-3xlarge,
"2xlarge": $font-size-2xlarge,
"xlarge": $font-size-xlarge,
"large": $font-size-large,
"medium": $font-size-medium,
"small": $font-size-small,
"xsmall": $font-size-xsmall,
"2xsmall": $font-size-2xsmall,
);
$font-weights: (
"normal": $font-weight-normal,
"strong": $font-weight-strong,
"mass": $font-weight-mass,
"elegant": $font-weight-elegant,
);
$line-heights: (
"5xlarge": $line-height-5xlarge,
"4xlarge": $line-height-4xlarge,
"3xlarge": $line-height-3xlarge,
"2xlarge": $line-height-2xlarge,
"xlarge": $line-height-xlarge,
"large": $line-height-large,
"medium": $line-height-medium,
"small": $line-height-small,
"xsmall": $line-height-xsmall,
"2xsmall": $line-height-2xsmall,
);
Sass utilities API
Font and text utilities are declared in our utilities API in scss/utilities/_text.scss. Learn how to use the utilities API.
"font-family": (
property: font-family,
class: font,
values: $font-families
),
"cx-font-weight": (
property: font-weight,
class: font,
values: $font-weights
),
"font-style": (
property: font-style,
class: text,
values: italic normal
),
"font-weight": (
property: font-weight,
class: text,
values: (
lighter: $font-weight-lighter,
light: $font-weight-light,
regular: $font-weight-regular,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
small: $small-line-height,
medium: $medium-line-height,
large: $large-line-height,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),