Cards
Card can be used to container a groups of related content.
Basic
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Borderless
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Extra Class
bodyClass, headerClass & footerClass to correspond section.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Clickable
click prop to true to make cursor become pointer.Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Media
Use the modern rules
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.
Kristen Fisher
Sep 23, 2021API
Card
| Prop | Description | Type | Default |
|---|---|---|---|
| header | Card header config | { content?: string | ReactNode, className?: string, bordered?: boolean, extra?: string | ReactNode } | - |
| footer | Card footer config | { content?: string | ReactNode, className?: string, bordered?: boolean } | - |
| bordered | Display Card with border (without shadow-sm) | boolean | false |
| clickable | Make cursor become pointer upon hover | boolean | false |
| bodyClass | Apply class to card body | string | - |
| onClick | Callback when Card is clicked | (e: MouseEvent) => void | - |