Metronic | State Colors

Hi, Sean

State Colors

Base State Colors

State Colors

You can apply Bootstrap and Metronic state color helper classes to the most of the Keen's components:

State	Class postfix	Usage example
Bootstrap States
Success	`*-success`	`btn-success` `kt-font-success`
Warning	`*-warning`	`btn-warning` `kt-font-warning`
Danger	`*-danger`	`btn-danger` `kt-font-danger`
Info	`*-info`	`btn-info` `kt-font-info`
Primary	`*-primary`	`btn-primary` `kt-font-primary`
Metronic Custom States
Brand	`*-brand`	`btn-success` `kt-font-brand`
Dark	`*-dark`	`btn-dark` `kt-font-dark`
Light	`*-light`	`btn-light` `kt-font-light`

Base Colors

You can apply Keen's base color helper classes to the most of the Keen's components:

Level	Preview	Class example
Label Classes
Level 1	Font Color BG Color	`kt-label-font-color-1` `kt-label-bg-color-1`
Level 2	Font Color BG Color	`kt-label-font-color-2` `kt-label-bg-color-2`
Level 3	Font Color BG Color	`kt-label-font-color-3` `kt-label-bg-color-3`
Level 4	Font Color BG Color	`kt-label-font-color-4` `kt-label-bg-color-4`
Shape Classes
Level 1	Font Color BG Color	`kt-shape-font-color-1` `kt-shape-bg-color-1`
Level 2	Font Color BG Color	`kt-shape-font-color-2` `kt-shape-bg-color-2`
Level 3	Font Color BG Color	`kt-shape-font-color-3` `kt-shape-bg-color-3`
Level 4	Font Color BG Color	`kt-shape-font-color-4` `kt-shape-bg-color-4`

Typography Examples

Apply state color classes to any typography element:

Success state text Warning state text Info state text

Danger state text Primary state text Focus state text

Apply base color classes to any typography element:

Label color level 4 Label color level 3 Label color level 2 Label color level 1

Button Examples

Apply color classes to any component:

Primary Success Warning Danger Brand Dark

Success Warning Danger Dark Brand Primary

Alert Examples

Well done! You successfully read this important alert message.

25%

Select A Demo

Deprecated: Return type of Adbar\Dot::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 390

Deprecated: Return type of Adbar\Dot::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 401

Deprecated: Return type of Adbar\Dot::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 412

Deprecated: Return type of Adbar\Dot::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 428

Deprecated: Return type of Adbar\Dot::count($key = null) should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 445

Deprecated: Return type of Adbar\Dot::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 461

Deprecated: Return type of Adbar\Dot::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/public/metronic-v6/tools/preview/docs/lib/dot.php on line 477

Demo 1