Text utilities

RTL-aware text utility classes.

Text alignment

Realign text in components. Text alignment classes are RTL-aware by default, so instead of “left” and “right” directions we are using “start” and “end” respectively.

<p class="mk-ta--start">Start-aligned text (which is left-aligned in LTR layouts and right-aligned in RTL)</p>
<p class="mk-ta--center">Center aligned text.</p>
<p class="mk-ta--end">End-aligned text (which is right-aligned in LTR layouts and left-aligned in RTL)</p>

Text decoration

Decorate text in components.

<p class="mk-td--underline">Underline text.</p>
<p class="mk-td--overline">Overline text.</p>
<p class="mk-td--line-through">Line through.</p>

Text transform

Transform text in components with text capitalization classes.

<p class="mk-tt--lowercase">Lowercased text.</p>
<p class="mk-tt--uppercase">Uppercased text.</p>
<p class="mk-tt--capitalize">CapiTaliZed text.</p>