Color Utilities

Use color utility classes for quick styling.

Text Colors

.ethio-text-primary

.ethio-text-secondary

.ethio-text-success

.ethio-text-warning

.ethio-text-error

.ethio-text-info

<p class="ethio-text-primary">Primary text</p>
  <p class="ethio-text-secondary">Secondary text</p>
  <p class="ethio-text-success">Success text</p>
  <p class="ethio-text-warning">Warning text</p>
  <p class="ethio-text-error">Error text</p>
  <p class="ethio-text-info">Info text</p>

Background Colors

.ethio-bg-primary

.ethio-bg-secondary

.ethio-bg-success

.ethio-bg-warning

.ethio-bg-error

.ethio-bg-info

<div class="ethio-bg-primary ethio-text-white">Primary background</div>
  <div class="ethio-bg-secondary ethio-text-white">Secondary background</div>
  <div class="ethio-bg-success ethio-text-white">Success background</div>