Spectre CSS

Text ​

Text utilities are used for text alignment, styles and overflow things.

Alignment ​

html
<!-- left-aligned text -->
<div class="text-left"></div>
<!-- center-aligned text -->
<div class="text-center"></div>
<!-- right-aligned text -->
<div class="text-right"></div>
<!-- justified text -->
<div class="text-justify"></div>

Weight ​

html
<!-- Normal weight text -->
<div class="text-normal"></div>
<!-- Bold text -->
<div class="text-bold"></div>
<!-- Italicized text -->
<div class="text-italic"></div>

Emphasis ​

html
<!-- Muted text -->
<div class="text-muted"></div>
<!-- Larger text (120%) -->
<div class="text-large"></div>
<!-- Smaller text (90%) -->
<div class="text-small"></div>
<!-- Tiny text (80%) -->
<div class="text-tiny"></div>

Overflow ​

html
<!-- Overflow behavior: display an ellipsis to represent clipped text -->
<div class="text-ellipsis"></div>
<!-- Overflow behavior: truncate the text -->
<div class="text-clip"></div>
<!-- Text may be broken at arbitrary points -->
<div class="text-break"></div>

Case ​

html
<!-- Lowercased text -->
<div class="text-lowercase"></div>
<!-- Uppercased text -->
<div class="text-uppercase"></div>
<!-- Capitalized text -->
<div class="text-capitalize"></div>