Check with your designers to help you design this section
Check with your designers to help you design this section
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-primary text-white">
.background-primary
</div>
</div>
<div class="col-sm-4">
<div class="text-primary">
.text-primary
</div>
</div>
<div class="col-sm-4">
<div class="border border-primary">
.border-primary
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-dark text-white">
.background-charcoal-dark
</div>
</div>
<div class="col-sm-4">
<div class="text-charcoal-dark">
.text-charcoal-dark
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-dark">
.border-charcoal-dark
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal text-white">
.background-charcoal
</div>
</div>
<div class="col-sm-4">
<div class="text-charcoal">
.text-charcoal
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal">
.border-charcoal
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-light ">
.background-charcoal-light
</div>
</div>
<div class="col-sm-4">
<div class="background-charcoal-dark text-charcoal-light">
.text-charcoal-light
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-light">
.border-charcoal-light
</div>
</div>
</div>Theme colors apply to info, warning, danger / error, and success.
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-primary text-white">
.background-primary
</div>
</div>
<div class="col-sm-4">
<div class="text-primary">
.text-primary
</div>
</div>
<div class="col-sm-4">
<div class="border border-primary">
.border-primary
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-info text-white">
.background-info
</div>
</div>
<div class="col-sm-4">
<div class="text-info">
.text-info
</div>
</div>
<div class="col-sm-4">
<div class="border border-info">
.border-info
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-success text-white">
.background-success
</div>
</div>
<div class="col-sm-4">
<div class="text-success">
.text-success
</div>
</div>
<div class="col-sm-4">
<div class="border border-success">
.border-success
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-warning text-white">
.background-warning
</div>
</div>
<div class="col-sm-4">
<div class="text-warning">
.text-warning
</div>
</div>
<div class="col-sm-4">
<div class="border border-warning">
.border-warning
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-error text-white">
.background-error
</div>
</div>
<div class="col-sm-4">
<div class="text-error">
.text-error
</div>
</div>
<div class="col-sm-4">
<div class="border border-error">
.border-error
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-danger text-white">
.background-danger
</div>
</div>
<div class="col-sm-4">
<div class="text-danger">
.text-danger
</div>
</div>
<div class="col-sm-4">
<div class="border border-danger">
.border-danger
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-90 text-white">
.background-charcoal-90
</div>
</div>
<div class="col-sm-4">
<div class="text-charcoal-90">
.text-charcoal-90
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-90">
.border-charcoal-90
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-80 text-white">
.background-charcoal-80
</div>
</div>
<div class="col-sm-4">
<div class="text-charcoal-80">
.text-charcoal-80
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-80">
.border-charcoal-80
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-70 text-white">
.background-charcoal-70
</div>
</div>
<div class="col-sm-4">
<div class="text-charcoal-70">
.text-charcoal-70
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-70">
.border-charcoal-70
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-30 ">
.background-charcoal-30
</div>
</div>
<div class="col-sm-4">
<div class="background-charcoal-70 text-charcoal-30">
.text-charcoal-30
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-30">
.border-charcoal-30
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-20 ">
.background-charcoal-20
</div>
</div>
<div class="col-sm-4">
<div class="background-charcoal-70 text-charcoal-20">
.text-charcoal-20
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-20">
.border-charcoal-20
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-10 ">
.background-charcoal-10
</div>
</div>
<div class="col-sm-4">
<div class="background-charcoal-70 text-charcoal-10">
.text-charcoal-10
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-10">
.border-charcoal-10
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-charcoal-05 ">
.background-charcoal-05
</div>
</div>
<div class="col-sm-4">
<div class="background-charcoal-70 text-charcoal-05">
.text-charcoal-05
</div>
</div>
<div class="col-sm-4">
<div class="border border-charcoal-05">
.border-charcoal-05
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4">
<div class="background-white ">
.background-white
</div>
</div>
<div class="col-sm-4">
<div class="background-charcoal-70 text-white">
.text-white
</div>
</div>
<div class="col-sm-4">
<div class="border border-white">
.border-white
</div>
</div>
</div>