Utilities
Helpful utility classes for quick styling adjustments
Spacing
Margin and padding utilities with spacing tokens:
Margin
CSS Classes
/* All sides */
.m-xs, .m-sm, .m-md, .m-lg, .m-xl, .m-2xl, .m-3xl, .m-0, .m-auto
/* Top */
.mt-xs, .mt-sm, .mt-md, .mt-lg, .mt-xl, .mt-2xl, .mt-3xl, .mt-0, .mt-auto
/* Right */
.mr-xs, .mr-sm, .mr-md, .mr-lg, .mr-xl, .mr-2xl, .mr-3xl, .mr-0, .mr-auto
/* Bottom */
.mb-xs, .mb-sm, .mb-md, .mb-lg, .mb-xl, .mb-2xl, .mb-3xl, .mb-0, .mb-auto
/* Left */
.ml-xs, .ml-sm, .ml-md, .ml-lg, .ml-xl, .ml-2xl, .ml-3xl, .ml-0, .ml-auto
/* Horizontal */
.mx-xs, .mx-sm, .mx-md, .mx-lg, .mx-xl, .mx-2xl, .mx-3xl, .mx-0, .mx-auto
/* Vertical */
.my-xs, .my-sm, .my-md, .my-lg, .my-xl, .my-2xl, .my-3xl, .my-0, .my-auto
Padding
CSS Classes
/* All sides */
.p-xs, .p-sm, .p-md, .p-lg, .p-xl, .p-2xl, .p-3xl, .p-0
/* Top */
.pt-xs, .pt-sm, .pt-md, .pt-lg, .pt-xl, .pt-2xl, .pt-3xl, .pt-0
/* Right */
.pr-xs, .pr-sm, .pr-md, .pr-lg, .pr-xl, .pr-2xl, .pr-3xl, .pr-0
/* Bottom */
.pb-xs, .pb-sm, .pb-md, .pb-lg, .pb-xl, .pb-2xl, .pb-3xl, .pb-0
/* Left */
.pl-xs, .pl-sm, .pl-md, .pl-lg, .pl-xl, .pl-2xl, .pl-3xl, .pl-0
/* Horizontal */
.px-xs, .px-sm, .px-md, .px-lg, .px-xl, .px-2xl, .px-3xl, .px-0
/* Vertical */
.py-xs, .py-sm, .py-md, .py-lg, .py-xl, .py-2xl, .py-3xl, .py-0
Margin Medium, Padding Large
HTML
<div class="m-md p-lg">
Margin Medium, Padding Large
</div>
Text
Text Alignment
Left aligned
Centered
Right aligned
Text Sizes
Extra Small Text
Small Text
Base Text
Large Text
Extra Large Text
Text Weights
Light Weight
Normal Weight
Medium Weight
Semibold Weight
Bold Weight
CSS Classes
/* Alignment */
.bl-text-left, .bl-text-center, .bl-text-right, .bl-text-justify
/* Sizes */
.bl-text-xs, .bl-text-sm, .bl-text-base, .bl-text-lg, .bl-text-xl, .bl-text-2xl
/* Weights */
.bl-font-light, .bl-font-normal, .bl-font-medium, .bl-font-semibold, .bl-font-bold
Display
CSS Classes
.bl-d-block /* display: block */
.bl-d-inline /* display: inline */
.bl-d-inline-block /* display: inline-block */
.bl-d-flex /* display: flex */
.bl-d-inline-flex /* display: inline-flex */
.bl-d-grid /* display: grid */
.bl-d-none /* display: none */
Visibility
CSS Classes
.bl-visible /* visibility: visible */
.bl-invisible /* visibility: hidden */
Position
CSS Classes
.bl-relative /* position: relative */
.bl-absolute /* position: absolute */
.bl-fixed /* position: fixed */
.bl-sticky /* position: sticky */
.bl-static /* position: static */