Accordion component:

Default state:

Lorem ipsum , dolor sit amet consectetur adipisicing elit. Est expedita quasi quibusdam molestiae nulla voluptatibus excepturi voluptates repellendus eius quaerat laboriosam, nesciunt laborum eos reprehenderit reiciendis beatae ab labore eligendi animi magnam quisquam architecto. Quod, quis at consequatur ratione possimus corporis. Dolor placeat quidem illum quos quo expedita et error?

Active state:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est expedita quasi quibusdamolestiae nulla voluptatibus excepturi voluptates repellendus eius quaerat laboriosam, nesciunt laborum eoso expedita et error?

Alert component:

Success state:

This is a success message, and it confirms you did something good!

Info state:

This is a information message, it gives you a message in neutral way.

Warning state:

This is a warning message. It will get your attention to give you important information.

Error state:

This is a error message. Something critical is happening or not working.

Button component:

Default state:

Active state:

Disabled state:

Card component:

Default state:

Dark abstarct image

A vibrant image of dark pink and dark blue jellyfish glowing underwater, their tentacles gracefully flowing.

Image by Florian Eckerle

Hover state:

Dark abstarct image

A vibrant image of dark pink and dark blue jellyfish glowing underwater, their tentacles gracefully flowing.

Components:

Accordion component:

Default state:

Return info

Active state:

Return info

Alert component:

Success state:

Info state:

Warning state:

Error state:

Button component:

Default state:

Active state:

Disabled state:

Card component:

Default state:

Dark abstarct image

Hover state:

Dark abstarct image

Checkbox component:

Default state:

Disabled state:

Progressbar component:

Loading state:

0% state:

100% state:

Search component:

Default state:

Focused state:

Disabled state:

Select component:

Default state:

Disabled state: