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:
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
And also adds its own 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:
Success state text Warning state text Info state text Danger state text Primary state text Focus state text
Apply state classes to any component:
new pending 203 hot fixed in process completed focus accent
25%
Megan wrote
Hi Bob. What time will be the meeting ?
Hi Megan. It's at 2.30PM
Megan wrote
Will the development team be joining ?
Yes sure. I invited them as well
2:30PM
Megan wrote
Noted. For the Coca-Cola Mobile App project as well ?
Yes, sure.
Please also prepare the quotation for the Loop CRM project as well.
3:15PM
M
Megan wrote
Noted. I will prepare it.
Thanks Megan. I will see you later.
Megan wrote
Sure. See you in the meeting soon.
General Settings
Email Notifications
Site Tracking
SMS Alerts
Backup Storage
Audit Logs
System Settings
System Logs
Error Reporting
Applications Logs
Backup Servers
Audit Logs