Card

Card is a components that use to show a content. It can be use as a container for other components. We have 2 card components.

Card: This is normal card that do nothing.
ToggleCard: This is card that can toggle open and close content.

This components. Store at src/components/atoms/card and src/components/molecules/card (ToggleCard)

Basic example

This are examples of how to use the card component. Toggle card will required some additional props such as title.

ExampleCode

Normal card

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat hic mollitia quos quia velit adipisci delectus animi pariatur, ipsam, quis distinctio dolores sed reiciendis aliquam maxime, quasi repellat obcaecati blanditiis!

Toggle card

Toggle card title

Default toggle open

You can set the open of the toggle card to true or false. This will make the card open or close by default.

ExampleCode

Default close

Default open

Attribute

id: string; The id of the card.
children: ReactNode (required); This is the content of the card.
className: string; This is the class name that you can style the card.

Toggle card attribute

id: string; The id of the card.
title: ReactNode (required); The title of the card.
children: ReactNode (required); This is the content of the card.
className: string; This is the class name that you can style the container.
cardClassName: string; This is the class name that you can style the card.

Term of service

Privacy statement