Colors

Brand color utilities

On this page

Brand Colors

beige, sand, plum, forest, grey added to $theme-colors

Auto-generates: .bg-* .text-* .text-bg-* .border-*

Color Swatches

.bg-beige

.bg-sand

.text-bg-plum

.text-bg-forest

.bg-grey

html

<div class="d-flex gap-2 flex-wrap">
<div class="bg-beige p-3 rounded">.bg-beige</div>
<div class="bg-sand p-3 rounded">.bg-sand</div>
<div class="text-bg-plum p-3 rounded">.text-bg-plum</div>
<div class="text-bg-forest p-3 rounded">.text-bg-forest</div>
<div class="bg-grey p-3 rounded">.bg-grey</div>
</div>

Dark Sections

Dark section

White text auto-applied with .text-bg-plum

html

<div class="text-bg-plum p-4 rounded">
<h5 class="mb-2">Dark section</h5>
<p class="mb-0">White text auto-applied with .text-bg-plum</p>
</div>

Border Accents

Psykiatri-klinik

Plum accent border

html

<div class="border-start border-3 border-plum ps-3">
<h6 class="mb-1">Psykiatri-klinik</h6>
<p class="small mb-0">Plum accent border</p>
</div>