To apply a background color, add the color name eq-deep-blue-500. To apply a text color, add the color name eq-green-turquoise-text-500
.eq-ui-card.eq-deep-blue-500.eq-green-turquoise-text-500
.eq-ui-card-supporting-text
| Sample color usage
<div class="eq-ui-card eq-deep-blue-500 eq-green-turquoise-text-500">
<div class="eq-ui-card-supporting-text">
Sample color usage
</div>
</div>To apply a hover for background color and text color, add -hover after the name color.
.eq-ui-card.eq-deep-blue-500-hover.eq-green-turquoise-text-500-hover
.eq-ui-card-supporting-text
| Sample hover color usage
<div class="eq-ui-card eq-deep-blue-500-hover eq-green-turquoise-text-500-hover">
<div class="eq-ui-card-supporting-text">
Sample hover color usage
</div>
</div>You can apply the color simply by extending the classes like the example below
.custom-container {
@extend .eq-deep-blue-500;
}