# Card
Create simple css cards, card with image, fab in card and horizontal card
Home
/
Card 
import { Card } from "funuicss";
#
Simple Card
A simple card with a header and message
React / Next.js
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
– Four Steps to Forgiveness, William Fergus Martin
#
Simple Card with an image
A simple card with a image, header, body and footer
React / Next.js
Men Show
Nike Air Max
$200.00
Men Show
Nike Air Max
$200.00
#
Simple Card with a Fab Icon
A simple card with a floating fab icon at the right
React / Next.js
css card
-
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
css card
# Mountains
This is a simple card that may be use to display a simple information.
- Card footer
Card
These are the props your can use on the card component
PropDescriptionValue(s)
`xl`To increase the shadow effect`Boolean`
`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`