Change typographic weights, styles, and alignment with these utility styles.





Left align


Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

No wrap



Font Family Inherit

Font Size Inherit

Text Decoration None
<p class="bold">Bold</p>
<p class="regular">Regular</p>
<p class="italic">Italic</p>
<p class="caps">Caps</p>
<p class="left-align">Left align</p>
<p class="center">Center</p>
<p class="right-align">Right align</p>
<p class="justify">Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="nowrap">No wrap</p>
<p class="underline">Underline</p>
<p class="truncate">Truncate</p>
<p class="font-familiy-inherit">Font Family Inherit</p>
<p class="font-size-inherit">Font Size Inherit</p>
<a class="text-decoration-none">Text Decoration None</a>


To remove default list styling, use .list-reset.

  • List Reset
  • Removes bullets
  • Removes numbers
  • Removes padding
<ul class="list-reset">
  <li>List Reset</li>
  <li>Removes bullets</li>
  <li>Removes numbers</li>
  <li>Removes padding</li>

To set lists inline, use utilities.

  • Half-Smoke
  • Kielbasa
  • Bologna
  • Prosciutto
<ul class="list-reset">
  <li class="inline-block mr1">Half-Smoke</li>
  <li class="inline-block mr1">Kielbasa</li>
  <li class="inline-block mr1">Bologna</li>
  <li class="inline-block mr1">Prosciutto</li>

CSS Source

.font-family-inherit { font-family: inherit }
.font-size-inherit { font-size: inherit }
.text-decoration-none { text-decoration: none }

.bold    { font-weight: var(--bold-font-weight, bold) }
.regular { font-weight: normal }
.italic  { font-style: italic }
.caps    { text-transform: uppercase; letter-spacing: var(--caps-letter-spacing); }

.left-align   { text-align: left }
.center       { text-align: center }
.right-align  { text-align: right }
.justify      { text-align: justify }

.nowrap { white-space: nowrap }
.break-word { word-wrap: break-word }

.line-height-1 { line-height: var(--line-height-1) }
.line-height-2 { line-height: var(--line-height-2) }
.line-height-3 { line-height: var(--line-height-3) }
.line-height-4 { line-height: var(--line-height-4) }

.list-style-none { list-style: none }
.underline { text-decoration: underline }

.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

.list-reset {
  list-style: none;
  padding-left: 0;
22 Rules
22 Selectors
32 Declarations
21 Properties