Text Color
The Telerik and Kendo UI Text Color Utilities are CSS utility classes that enable you to control the text color.
| Utility Class | CSS Property |
|---|---|
.k-text-white | color: white; |
.k-text-app-surface | color: var(--kendo-color-app-surface, #fafafa); |
.k-text-on-app-surface | color: var(--kendo-color-on-app-surface, #424242); |
.k-text-subtle | color: var(--kendo-color-subtle, #666666); |
.k-text-surface | color: var(--kendo-color-surface, #ffffff); |
.k-text-surface-alt | color: var(--kendo-color-surface-alt, #f5f5f5); |
.k-text-border | color: var(--kendo-color-border, #d9d9d9); |
.k-text-border-alt | color: var(--kendo-color-border-alt, #e0e0e0); |
.k-text-base-subtle | color: var(--kendo-color-base-subtle, #f0f0f0); |
.k-text-base-emphasis | color: var(--kendo-color-base-emphasis, #000000); |
.k-text-primary-subtle | color: var(--kendo-color-primary-subtle, #e3f2fd); |
.k-text-primary | color: var(--kendo-color-primary, #2196f3); |
.k-text-primary-emphasis | color: var(--kendo-color-primary-emphasis, #1976d2); |
.k-text-secondary-subtle | color: var(--kendo-color-secondary-subtle, #f3e5f5); |
.k-text-secondary | color: var(--kendo-color-secondary, #9c27b0); |
.k-text-secondary-emphasis | color: var(--kendo-color-secondary-emphasis, #7b1fa2); |
.k-text-tertiary-subtle | color: var(--kendo-color-tertiary-subtle, #fff3e0); |
.k-text-tertiary | color: var(--kendo-color-tertiary, #ff9800); |
.k-text-tertiary-emphasis | color: var(--kendo-color-tertiary-emphasis, #f57c00); |
.k-text-info-subtle | color: var(--kendo-color-info-subtle, #e1f5fe); |
.k-text-info | color: var(--kendo-color-info, #00bcd4); |
.k-text-info-emphasis | color: var(--kendo-color-info-emphasis, #0097a7); |
.k-text-success-subtle | color: var(--kendo-color-success-subtle, #e8f5e8); |
.k-text-success | color: var(--kendo-color-success, #4caf50); |
.k-text-success-emphasis | color: var(--kendo-color-success-emphasis, #388e3c); |
.k-text-warning-subtle | color: var(--kendo-color-warning-subtle, #fff8e1); |
.k-text-warning | color: var(--kendo-color-warning, #ff9800); |
.k-text-warning-emphasis | color: var(--kendo-color-warning-emphasis, #f57c00); |
.k-text-error-subtle | color: var(--kendo-color-error-subtle, #ffebee); |
.k-text-error | color: var(--kendo-color-error, #f44336); |
.k-text-error-emphasis | color: var(--kendo-color-error-emphasis, #d32f2f); |
.k-text-light-subtle | color: var(--kendo-color-light-subtle, #f8f9fa); |
.k-text-light | color: var(--kendo-color-light, #f8f9fa); |
.k-text-light-emphasis | color: var(--kendo-color-light-emphasis, #dee2e6); |
.k-text-dark-subtle | color: var(--kendo-color-dark-subtle, #6c757d); |
.k-text-dark | color: var(--kendo-color-dark, #343a40); |
.k-text-dark-emphasis | color: var(--kendo-color-dark-emphasis, #212529); |
.k-text-inherit | color: inherit; |
.k-text-current | color: currentColor; |
.k-text-transparent | color: transparent; |
.k-text-black | color: black; |
Applying Text Color
Use the k-text-{color} to set the text color explicitly.
