Create simple css cards, card with image, fab in card and horizontal card
Card
These are the props your can use on the card component
| Prop | Description | Value(s) |
|---|---|---|
| `header` | To set the Title of your card | `React Node` |
| `body` | To set the body of your card | `React Node` |
| `footer` | To set the footer of your card | `React Node` |
| `image` | To add am image to your card | `React Node` |
| `noGap` | Remove default gaps between body, header and footer | `React Node` |
| `width` | To set the width of your card | `Css width value` |
| `maxWidth` | To set the maximum width of your card | `Css max-width value` |
| `height` | To set the height of your card | `Css height value` |
| `maxHeight` | To set the maximum height of your card | `Css max-height value` |
| `roundEdge` | To add border radius to the card | `Boolean` |
| `horizontal` | To create a horizontal card | `Boolean` |
| `shadowless` | Remove the shadow | `Boolean` |
#
Simple Card
A simple card with a header and message
React / Next.js Show Source Code
Self Forgiveness
Self forgiveness is one of the most unselfish things you can do. Everyone around benefits as you become less demanding, more giving and more forgiving
#
Simple Card with an image
A simple card with a image, header, body and footer
React / Next.js Show Source Code
Image card
This is a simple card that may be use to display a simple information.
#
Simple Card with a Fab Icon
A simple card with a floating fab icon at the right
React / Next.js Show Source Code
-
John Deo
Web designer
This is a simple card that may be use to display a simple information.
#
Horizontal Card
A simple card which displays two columns and hide the footer on small screens for better UX
React / Next.js Show Source Code
# Mountains
This is a simple card that may be use to display a simple information.