# Main Card

This component extends the original component provided by MUI: <https://mui.com/material-ui/react-card/>

The extended properties are:

| Property                                   | Type                       | Props Value           |
| ------------------------------------------ | -------------------------- | --------------------- |
| border                                     | boolean                    | true (default), false |
| boxShadow                                  | boolean                    | false (default), true |
| subheader                                  | ReactNode \| string        |                       |
| style                                      | CSSProperties              |                       |
| content                                    | boolean                    | true (default), false |
| contentSX                                  | CardContentProps\['sx']    |                       |
| darkTitle                                  | boolean                    | false (default), true |
| divider                                    | boolean                    | true (default), false |
| sx                                         | CardProps\['sx']           |                       |
| secondary                                  | CardHeaderProps\['action'] |                       |
| shadow                                     | string                     |                       |
| elevation                                  | number                     |                       |
| title                                      | ReactNode \| string        |                       |
| codeHighlight                              | boolean                    | false (default), true |
| codeString                                 | string                     |                       |
| modal                                      | boolean                    | false (default), true |
| children<mark style="color:red;">\*</mark> | ReactNode \| string        |                       |

{% hint style="info" %}
Asterisk (<mark style="color:red;">\*</mark>) indicates required props.
{% endhint %}

Live Preview: [https://mantisdashboard.](https://mantisdashboard.io/components-overview/cards)[com](https://mantisdashboard.io/components-overview/buttons)[/components-overview/cards](https://mantisdashboard.com/components-overview/cards)