<style>
.color-chip__data p {
display: none;
margin: 0;
}
.color-copy-button-container {
display: none;
}
.color-chip:hover,
.color-chip:focus {
position: relative;
transition: transform 0.05s ease-in;
transform: scale(1.25);
z-index: 100;
}
.color-chip:hover .color-chip-info,
.color-chip:focus .color-chip-info {
transform-origin: top left;
transition: none;
transform: scale(0.8);
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
.primary.slim.color-chip:hover,
.primary.slim.color-chip:focus,
.tertiary-container .color-chip:hover,
.tertiary-container .color-chip:focus {
transform: scale(1.5, 1.25);
border-left-width: calc(5px/1.5);
/* 5/1.5 */
border-right-width: calc(5px/1.5);
border-top-width: calc(5px/1.25);
border-bottom-width: calc(5px/1.25);
}
.primary.slim.color-chip:hover .color-chip-info,
.primary.slim.color-chip:focus .color-chip-info,
.tertiary-container .color-chip:hover .color-chip-info,
.tertiary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/1.5), calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/1.5);
/* 0.5 / 1.25 and 0.5 / 1.5 */
width: calc(150% - 1rem);
height: calc(125% - 1rem);
}
.secondary-container .color-chip:hover,
.secondary-container .color-chip:focus {
transform: scale(2.25, 1.25);
border-left-width: calc(5px/2.25);
/* 5/2.25 */
border-right-width: calc(5px/2.25);
border-top-width: calc(5px/1.25);
border-bottom-width: calc(5px/1.25);
}
.secondary-container .color-chip:hover .color-chip-info,
.secondary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/2.25), calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/2.25);
/* 0.5 / 1.25 and 0.5 / 2.25 */
width: calc(225% - 1rem);
height: calc(125% - 1rem);
}
.color-chip:hover p,
.color-chip:focus p {
display: inherit;
transform-origin: top left;
overflow: visible;
width: 100%;
}
.color-chip:hover .color-copy-button-container,
.color-chip:focus .color-copy-button-container {
display: inherit;
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container .color-chip:nth-child(1) {
transform-origin: top;
}
.color-chip-container .color-chip:nth-child(2) {
transform-origin: center;
}
.color-chip-container .color-chip:nth-child(3) {
transform-origin: bottom;
}
.color-chip-container .col-lg:nth-child(1) .color-chip {
transform-origin: left;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip {
transform-origin: right;
}
.color-chip__name {
font-weight: bold;
}
@media (min-width: 766px) and (max-width: 991.98px) {
/* for block of colors with 3 per row */
.secondary-container .col-md-4 .color-chip:hover,
.secondary-container .color-chip:focus {
transform: scale(1.25, 1.25);
border-left-width: calc(5px / 1.25);
/* 5/2.25 */
border-right-width: calc(5px / 1.25);
border-top-width: calc(5px / 1.25);
border-bottom-width: calc(5px / 1.25);
}
.secondary-container .col-md-4 .color-chip:hover .color-chip-info,
.secondary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/1.25), 0.8);
margin: calc(0.5rem / 1.25) calc(0.5rem / 1.25);
/* 0.5 / 1.25 and 0.5 / 2.25 */
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
/* for block of colors with 4 per row */
.secondary-container .col-md-3 .color-chip:hover,
.secondary-container .color-chip:focus {
transform: scale(calc(15/9), 1.25);
border-left-width: calc(5px / calc(15/9));
/* 5/2.25 */
border-right-width: calc(5px / calc(15/9));
border-top-width: calc(5px / 1.25);
border-bottom-width: calc(5px / 1.25);
}
.secondary-container .col-md-3 .color-chip:hover .color-chip-info,
.secondary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/calc(15/9)), 0.8);
margin: calc(0.5rem / 1.25) calc(0.5rem / calc(15/9));
/* 0.5 / 1.25 and 0.5 / 2.25 */
width: calc(calc(1500%/9) - 1rem);
height: calc(125% - 1rem);
}
.color-chip-container.secondary-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
/* agave */
.color-chip-container.secondary-container .col-lg:nth-child(4) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container.secondary-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
/* agave dark */
.color-chip-container.secondary-container .col-lg:nth-child(4) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
/* palm */
.color-chip-container.secondary-container .col-lg:nth-child(3) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.secondary-container .col-lg:nth-child(3) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container.secondary-container .color-chip:nth-child(1) {
transform-origin: top;
}
.color-chip-container.secondary-container .color-chip:nth-child(2) {
transform-origin: center;
}
.color-chip-container.secondary-container .color-chip:nth-child(3) {
transform-origin: bottom;
}
.color-chip-container.secondary-container .col-lg:nth-child(1) .color-chip {
transform-origin: left;
}
/* agave light */
.color-chip-container.secondary-container .col-lg:nth-child(4) .color-chip {
transform-origin: left;
}
/* palm light */
.color-chip-container.secondary-container .col-lg:nth-child(3) .color-chip {
transform-origin: right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip {
transform-origin: right;
}
.color-chip-container.tertiary-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(2) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.tertiary-container .col-lg:nth-child(3) .color-chip:nth-last-child(1) {
transform-origin: bottom left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(4) .color-chip:nth-last-child(1) {
transform-origin: bottom right;
}
.color-chip-container.tertiary-container .col-lg:nth-child(2n-1) .color-chip {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(2n) .color-chip {
transform-origin: right;
}
.tertiary-container .color-chip:hover,
.color-chip:focus {
position: relative;
transition: transform 0.05s ease-in;
transform: scale(1.25);
z-index: 100;
}
.tertiary-container .color-chip:hover .color-chip-info,
.color-chip:focus .color-chip-info {
transform-origin: top left;
transition: none;
transform: scale(0.8);
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
}
/* mobile view. no copy button because who's copying on mobile?? */
@media (max-width: 767.98px) {
.color-chip-container .color-chip:hover,
.color-chip:focus {
position: relative;
transition: transform 0.05s ease-in;
transform: scale(1.25);
border-left-width: calc(5px / 1.25);
/* 5/2.25 */
border-right-width: calc(5px / 1.25);
border-top-width: calc(5px / 1.25);
border-bottom-width: calc(5px / 1.25);
}
.color-chip-container .color-chip:hover .color-chip-info,
.color-chip:focus .color-chip-info {
transform: scale(calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/1.25);
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container .col-lg:nth-child(2) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(2) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container .col-lg:nth-child(2n-1) .color-chip {
transform-origin: left;
}
.color-chip-container .col-lg:nth-child(2n) .color-chip {
transform-origin: right;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-last-child(2) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
.color-chip-container.tertiary-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: right;
}
.primary.slim.color-chip:hover,
.primary.slim.color-chip:focus {
transform: scale(2.5, 1.25);
border-left-width: calc(5px/1.5);
/* 5/1.5 */
border-right-width: calc(5px/1.5);
border-top-width: calc(5px/1.25);
border-bottom-width: calc(5px/1.25);
}
.primary.slim.color-chip:hover .color-chip-info,
.primary.slim.color-chip:focus .color-chip-info {
transform: scale(calc(1/2.5), calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/2.5);
/* 0.5 / 1.25 and 0.5 / 1.5 */
width: calc(250% - 1rem);
height: calc(125% - 1rem);
}
}
.color-chip {
height: 10rem;
border: 5px solid white;
}
.color-chip-info {
margin: 0.5rem;
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
position: relative;
width: 100%;
padding: 0;
}
.row {
margin: 0;
}
.color-copy-button-container {
position: absolute;
right: 0;
bottom: 0;
border: 1px solid;
width: fit-content;
padding: 5px;
text-align: center;
}
.color-copy-button {
text-align: center;
margin: 5px;
}
.color-copy-button-container:hover {
cursor: pointer;
}
</style>
<!-- primary colors -->
<h2>Primary Colors</h2>
<div class="primary-color-chip-container">
<div class="row">
<div class="col-6">
<div class="color-chip primary" tabindex="0" style="transform-origin: top left">
<div class="color-chip-info">
<div class="color-chip__name">
Santa Clara Red
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip primary" tabindex="0" style="transform-origin: bottom left">
<div class="color-chip-info">
<div class="color-chip__name">
White
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="color-chip primary" tabindex="0" style="transform-origin: top right">
<div class="color-chip-info">
<div class="color-chip__name">
Bronco Red
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="color-chip primary slim" tabindex="0" style="transform-origin: bottom">
<div class="color-chip-info">
<div class="color-chip__name">
Stone
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="color-chip primary slim" tabindex="0" style="transform-origin: bottom right">
<div class="color-chip-info">
<div class="color-chip__name">
Black
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- secondary colors -->
<h2>Secondary Colors</h2>
<div class="color-chip-container secondary-container">
<div class="row">
<div class="col-6 col-lg col-md-4">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Terracotta
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Terracotta Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Terracotta Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-4">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sunrise
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sunrise Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sunrise Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-4">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Palm
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Palm Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Palm Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Agave
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Agave Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Agave Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sky
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sky Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sky Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Wisteria
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Wisteria Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Wisteria Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Rose
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Rose Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Rose Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Neutral Colors</h2>
<div class="color-chip-container tertiary-container">
<div class="row">
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Fog
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Fog Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Fog Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Adobe
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Adobe Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Adobe Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Clay
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Clay Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Clay Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Slate
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Slate Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Slate Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Text Color</h3>
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
<div class="bd-example">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
</div>
<pre><code class="language-markup"><script type="prism-html-markup">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p></script></code></pre>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="highlighter-rouge">.text-*</code> utilities.</p>
<div class="bd-example">
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
</div>
<pre><code class="language-markup"><script type="prism-html-markup">
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p></script></code></pre>
<h3>Background Color</h3>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="highlighter-rouge">.text-*</code> utilities.</p>
<div class="bd-example">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
</div>
<pre><code class="language-markup"><script type="prism-html-markup">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div></script></code></pre>
<h4>Background Gradients</h4>
<div class="bd-example">
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient text-white">.bg-gradient</div>
</div>
<pre><code class="language-markup"><script type="prism-html-markup">
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient text-white">.bg-gradient</div></script></code></pre>
