A collection of single purpose utility classes. In most cases, a utility class applies a single CSS property and makes use of !important to ensure styles are overridden.

Playground

<p class="u-mb-sm">Box Shadow Utility</p> <div class="u-bg-explore-blue u-bs-none u-mb u-p-sm" style="box-shadow: 0 0 0 4px"> <code class="c-code">.u-bs-none</code> </div> <p class="u-mb-sm">Opacity Utility</p> <div class="u-bg-message-green u-opacity-opaque u-mb u-p-sm" style="opacity: 0"> <code class="c-code">.u-opacity-opaque</code> </div> <div class="u-bc-grey-700 u-border" style="border-style: dotted !important"> <div class="u-bg-chat-orange u-opacity-transparent u-p-sm" style="opacity: 1"> <code class="c-code">.u-opacity-transparent</code> </div> </div>