Colors

The colors that style most AiraCSS elements and components

Text colors

To apply a text color, just append text-* to the color class like this: text-primary

primary color

secondary color

darkcolor

light color

success color

info color

warning color

error color

<p class="text-primary"></p>
<p class="text-secondary"></p>
<p class="text-dark"></p>
<p class="text-light"></p>
<p class="text-success"></p>
<p class="text-info"></p>
<p class="text-warning"></p>
<p class="text-error"></p>
Note our color classes are the text in bold above 👆🏼 .For example text-primary

Other Text colors

text-red-100

text-red-200

text-red-300

text-red-400

text-red-500

text-red-600

text-red-700

text-red-800

text-red-900

text-red-1000

text-pink-100

text-pink-200

text-pink-300

text-pink-400

text-pink-500

text-pink-600

text-pink-700

text-pink-800

text-pink-900

text-pink-1000

text-orange-100

text-orange-200

text-orange-300

text-orange-400

text-orange-500

text-orange-600

text-orange-700

text-orange-800

text-orange-900

text-orange-1000

text-yellow-100

text-yellow-200

text-yellow-300

text-yellow-400

text-yellow-500

text-yellow-600

text-yellow-700

text-yellow-800

text-yellow-900

text-yellow-1000

text-purple-100

text-purple-200

text-purple-300

text-purple-400

text-purple-500

text-purple-600

text-purple-700

text-purple-800

text-purple-900

text-purple-1000

text-green-100

text-green-200

text-green-300

text-green-400

text-green-500

text-green-600

text-green-700

text-green-800

text-green-900

text-green-1000

text-blue-100

text-blue-200

text-blue-300

text-blue-400

text-blue-500

text-blue-600

text-blue-700

text-blue-800

text-blue-900

text-blue-1000

text-light-blue-100

text-light-blue-200

text-light-blue-300

text-light-blue-400

text-light-blue-500

text-brown-100

text-brown-200

text-brown-300

text-brown-400

text-brown-500

text-gray-100

text-gray-200

text-gray-300

text-gray-400

text-gray-500

text-gray-600

text-gray-700

text-gray-800

Color copied!