-
-
-
Mark Andre mark.andre@gmail.com
State Colors
Metronic comes with a number of state colors that can be applied to the most of elements and components. It reuses Bootstrap's original 6 states:
And also adds its own
| State | Preview | Class postfix | Usage example |
|---|---|---|---|
| Success | *-success |
btn-success m--font-success |
|
| Warning | *-warning |
btn-warning m--font-warning |
|
| Danger | *-danger |
btn-danger m--font-danger |
|
| Info | *-info |
btn-info m--font-info |
|
| Primary | *-primary |
btn-primary m--font-primary |
|
| Secondary | *-secondary |
btn-secondary m--font-secondary |
brand and metal states:
| State | Preview | Class addon | Usage example |
|---|---|---|---|
| Brand | *-brand |
btn-success m--font-brand |
|
| Accent | *-accent |
btn-accent m--font-accent |
|
| Focus | *-focus |
btn-focus m--font-focus |
|
| Metal | *-metal |
btn-metal m--font-metal |
|
| Light | *-light |
btn-light m--font-light |
State Examples
Apply state classes to any typography element:
Apply state classes to any component:
Success state text
Warning state text
Info state text
Danger state text
Primary state text
Focus state text
new
203
hot
fixed
in process
completed
focus
accent
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
