Rotating Card
The Rotating Card component helps you to simply create a beautiful card with two sides with rotating functionality.
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.
Demo
// Material Kit 2 React Examples
import RotatingCard from "examples/Cards/RotatingCard";
import RotatingCardFront from "examples/Cards/RotatingCard/RotatingCardFront";
import RotatingCardBack from "examples/Cards/RotatingCard/RotatingCardBack";
Feel the
Feel the
Material Kit
All the MUI components that you need in a development have been re-design with the new look.
Discover More
You will save a lot of time going from prototyping to full-functional code because all elements are implemented.
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| children* | node | Used to set the RotatingCard front and back sides. Its a required prop. |
Rotating Card Front
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''dark''light' | info | Used to set the RotatingCardFront background image overlay color. |
| image* | string | Used to set the RotatingCardFront background image. Its a required prop. | |
| icon* | node | '' | Used to set the RotatingCardFront icon on top of its title. |
| title* | node | Used to set the RotatingCardFront title. Its a required prop. | |
| description* | node | Used to set the RotatingCardFront description. Its a required prop. |
Rotating Card Back
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''dark''light' | info | Used to set the RotatingCardBack background image overlay color. |
| image* | string | Used to set the RotatingCardBack background image. Its a required prop. | |
| title* | node | Used to set the RotatingCardBack title. Its a required prop. | |
| description* | node | Used to set the RotatingCardBack description. Its a required prop. | |
| action* | bool{ type: ["internal", "external"], route: String, label: String } | Used to set the RotatingCardBack action button route and text. Its a required prop. |