Background
Background color utilities set background-color from role and surface tokens.
Role backgrounds
Solid role backgrounds pair with text-inverse for contrast. Subtle variants use a lighter tint and keep default text color.
index.htmlhtml
<div class="bg-primary text-inverse border rounded-sm p-2 mb-3">bg-primary</div>
<div class="bg-secondary text-inverse border rounded-sm p-2 mb-3">bg-secondary</div>
<div class="bg-success text-inverse border rounded-sm p-2 mb-3">bg-success</div>
<div class="bg-warning border rounded-sm p-2 mb-3">bg-warning</div>
<div class="bg-danger text-inverse border rounded-sm p-2 mb-3">bg-danger</div>
<div class="bg-info text-inverse border rounded-sm p-2 mb-3">bg-info</div>
<div class="bg-primary-subtle border rounded-sm p-2 mb-3">bg-primary-subtle</div>
<div class="bg-secondary-subtle border rounded-sm p-2 mb-3">bg-secondary-subtle</div>
<div class="bg-success-subtle border rounded-sm p-2 mb-3">bg-success-subtle</div>
<div class="bg-warning-subtle border rounded-sm p-2 mb-3">bg-warning-subtle</div>
<div class="bg-danger-subtle border rounded-sm p-2 mb-3">bg-danger-subtle</div>
<div class="bg-info-subtle border rounded-sm p-2">bg-info-subtle</div>bg-primary
bg-secondary
bg-success
bg-warning
bg-danger
bg-info
bg-primary-subtle
bg-secondary-subtle
bg-success-subtle
bg-warning-subtle
bg-danger-subtle
bg-info-subtle
Surface backgrounds
Surface tokens create depth layers. Use bg-canvas for the page base, bg-surface for cards, and bg-surface-raised / bg-surface-sunken for elevation variation.
index.htmlhtml
<div class="bg-canvas border rounded-sm p-2 mb-3">bg-canvas</div>
<div class="bg-surface border rounded-sm p-2 mb-3">bg-surface</div>
<div class="bg-surface-raised border rounded-sm p-2 mb-3">bg-surface-raised</div>
<div class="bg-surface-sunken border rounded-sm p-2 mb-3">bg-surface-sunken</div>
<div class="bg-surface-inverse text-inverse border rounded-sm p-2">bg-surface-inverse</div>bg-canvas
bg-surface
bg-surface-raised
bg-surface-sunken
bg-surface-inverse
Reference
| Class | Property | Responsive |
|---|---|---|
.bg-primary | background-color: var(--primary) | No |
.bg-primary-subtle | background-color: var(--primary-subtle) | No |
.bg-secondary | background-color: var(--secondary) | No |
.bg-secondary-subtle | background-color: var(--secondary-subtle) | No |
.bg-success | background-color: var(--success) | No |
.bg-success-subtle | background-color: var(--success-subtle) | No |
.bg-warning | background-color: var(--warning) | No |
.bg-warning-subtle | background-color: var(--warning-subtle) | No |
.bg-danger | background-color: var(--danger) | No |
.bg-danger-subtle | background-color: var(--danger-subtle) | No |
.bg-info | background-color: var(--info) | No |
.bg-info-subtle | background-color: var(--info-subtle) | No |
.bg-canvas | background-color: var(--canvas) | No |
.bg-surface | background-color: var(--surface) | No |
.bg-surface-raised | background-color: var(--surface-raised) | No |
.bg-surface-sunken | background-color: var(--surface-sunken) | No |
.bg-surface-inverse | background-color: var(--surface-inverse) | No |