UI: Components

Expand Card

The Expand Card component allows users to reveal additional content by clicking on a button. The card has a front and back side, and can be expanded or collapsed by toggling the button.

Using the popover API, not requiring JavaScript.

This is a headline for the front

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

And this is the backside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis beatae sed, impedit sapiente numquam molestias nam sint nostrum rem qui aspernatur expedita quidem laborum illum.

With opposite color-scheme

This is a headline for the front

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

And this is the backside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis beatae sed, impedit sapiente numquam molestias nam sint nostrum rem qui aspernatur expedita quidem laborum illum.

With right-to-left

This is a headline for the front

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

And this is the backside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis beatae sed, impedit sapiente numquam molestias nam sint nostrum rem qui aspernatur expedita quidem laborum illum.