Text Colors
Use extended text helper classes defined in
src/assets/sass/core/components/helpers/_text.scss for more advance use cases.
Colorize text with color utilities as shown
.text-white
.text-primary
.text-secondary
.text-light
.text-success
.text-info
.text-warning
.text-danger
.text-dark
.text-muted
.text-gray-100
.text-gray-200
.text-gray-300
.text-gray-400
.text-gray-500
.text-gray-600
.text-gray-700
.text-gray-800
.text-gray-900
<div class="text-white"></div>
<div class="text-primary"></div>
<div class="text-secondary"></div>
<div class="text-light"></div>
<div class="text-success"></div>
<div class="text-info"></div>
<div class="text-warning"></div>
<div class="text-danger"></div>
<div class="text-dark"></div>
<div class="text-muted"></div>
<div class="text-gray-100"></div>
<div class="text-gray-200"></div>
<div class="text-gray-300"></div>
<div class="text-gray-400"></div>
<div class="text-gray-500"></div>
<div class="text-gray-600"></div>
<div class="text-gray-700"></div>
<div class="text-gray-800"></div>
<div class="text-gray-900"></div>Light Colors
Use
.text-light-{color} class to set an element's light color defined with $theme-light-colors in sass/_variables.scss:
.text-light-primary
.text-light-secondary
.text-light-success
.text-light-info
.text-light-warning
.text-light-danger
.text-light-dark
<div class="text-light-primary bg-primary"></div>
<div class="text-light-secondary bg-secondary"></div>
<div class="text-light-success bg-success"></div>
<div class="text-light-info bg-info"></div>
<div class="text-light-warning bg-warning"></div>
<div class="text-light-danger bg-danger"></div>
<div class="text-light-dark bg-dark"></div>Inverse Colors
Use
.text-inverse-{color} class to set an element's inverse color defined with $theme-inverse-colors in sass/_variables.scss:
.text-light-primary
.text-light-secondary
.text-light-light
.text-light-success
.text-light-info
.text-light-warning
.text-light-danger
.text-light-dark
<div class="text-inverse-primary bg-primary"></div>
<div class="text-inverse-secondary bg-secondary"></div>
<div class="text-inverse-light bg-light"></div>
<div class="text-inverse-success bg-success"></div>
<div class="text-inverse-info bg-info"></div>
<div class="text-inverse-warning bg-warning"></div>
<div class="text-inverse-danger bg-danger"></div>
<div class="text-inverse-dark bg-dark"></div>
2024©
Keenthemes
