Topics
Components
Dropdown Label
 | :default | background-color: --color-secondary-7; |
background-color: --color-main-primary; color: --color-main-secondary; |
background-color: --color-main-secondary; color: --color-main-light;; |
background-color: --color-main-light; color: --color-secondary-15; |
Cards
| .card-12:default .card-24:default | |
 | .card-12:default | background-color: --color-secondary-7; icon-color: --color-main-secondary; icon-border-width: 2px; color: --color-main-secondary; border: 1px solid --color-secondary-15; border-radius: 1px; font: font-label; padding: 1.2rem 0.95rem; |
 | .card-24:default | background-color: --color-secondary-7; icon-color: --color-main-secondary; icon-border-width: 2px; color: --color-main-secondary; border: 1px solid --color-secondary-15; border-radius: 1px; font: font-label; padding: 1.2rem 1.9rem; |
Divider
 | .divider-1 | border: 1px solid --color-secondary-7; color: --color-secondary-70; font: font-title-small; padding-left: 0; |
 | .divider-2 | padding-left: 1.8rem; |
Notification
 |  |  |
| .notification-icon background-color: --color-main-primary; 'icon-color: --color-main-light; padding: 0.95rem 1.1rem; | .notification-message padding: 0.95rem 1.1rem; background-color: --color-secondary-7; font: --font-notification; | |
|  |  |
| :positiv | :attention | :warning |
More
Design styles at Figma library
You can find the (css) details all our components in our corporate account in Figma. The core library contains our basic, general elements. A separate library is available for web applications and our website. Please login to Figma, if you want to see the libraries. The libraries are unlocked for all registered members with a wago.com email address.