Text utils

Text alignment

Easily realign text to components with text alignment classes.

 

Text transformation

Transform text in components with text capitalization classes.

Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

 

Text truncate

Trunctate texts using the CSS class .text-truncate (which adds an ellipsis).

In cases where the CSS class .text-truncate does not work (because of ::before), the Web Component <sdx-text-truncate /> can be used.

 

Maximum text width

To make long text paragraphs easier to read, SDX recommends to limit their width to a maximum of 666px. This helper class makes it easy to ensure that the text will wrap and never exceed this limit.

 

Paragraph class

To make any element have the same style as the p tag, the CSS class .paragraph can be added.