Topics
Components

Dropdown Label

:default


:active

background-color: --color-secondary-7;
color: --color-main-secondary;
border: 1px solid --color-secondary-15;
border-radius: 1px;
padding: 0.8rem 0.6rem;
font: --font-button;
width: fit-content;

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:defaultbackground-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:defaultbackground-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-1border: 1px solid --color-secondary-7;
color: --color-secondary-70;
font: font-title-small;
padding-left: 0;
.divider-2padding-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