Info Cards
The Info Cards components helps you to simply create beautiful cards for display less amount of data.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Default Info Card
// Material Kit 2 React Examples
import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard";
Fully integrated
We get insulted by others, lose trust for those We get back freezes
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Used to set the DefaultInfoCard color, it will only affect to the icon. |
| icon* | node | Used to add the DefaultInfoCard icon. Its a required prop. | |
| title* | string | Used to set the DefaultInfoCard title. Its a required prop. | |
| description* | string | Used to set the DefaultInfoCard description. Its a required prop. | |
| direction | 'left''right''center' | left | Used to set the DefaultInfoCard content direction. |
| small | bool | false | if true the description font size will be smaller. |
Filled Info Card
// Material Kit 2 React Examples
import FilledInfoCard from "examples/Cards/InfoCards/FilledInfoCard";
Get Started
Check the possible ways of working with our product and the necessary files for building your own project.
Let's startProps Information
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'contained''gradient' | contained | Used to set the FilledInfoCard background color type. |
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Used to set the FilledInfoCard color. |
| icon* | node | Used to add the FilledInfoCard icon. Its a required prop. | |
| title* | string | Used to set the FilledInfoCard title. Its a required prop. | |
| description* | string | Used to set the FilledInfoCard description. Its a required prop. | |
| action | bool{ type: ["external", "internal"], route: String, label: String } | false | Used to set the FilledInfoCard action button. |
Simple Info Card
PRO
// Material Kit 2 PRO React Examples
import SimpleInfoCard from "examples/Cards/InfoCards/SimpleInfoCard";
Fully integrated
We get insulted by others, lose trust for those We get back freezes
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Used to set the SimpleInfoCard color, it will only affect to the icon. |
| icon* | node | Used to add the SimpleInfoCard icon. Its a required prop. | |
| title* | string | Used to set the SimpleInfoCard title. Its a required prop. | |
| description* | string | Used to set the SimpleInfoCard description. Its a required prop. | |
| direction | 'left''right''center' | left | Used to set the SimpleInfoCard content direction. |