Card
Card components in Recast UI are versatile and can be used to group and display content in a clear and concise format. The Card components consist of four parts: Card, CardHeader, CardBody, and CardFooter.
Import
import { Card, CardHeader, CardBody, and CardFooter } from "@recastui/react";
Usage
Basic Usage
<Card><CardBody>View a summary of all your customers over the last month.</CardBody></Card>
Card with Header & Footer
<Card><CardHeader><h2 className='text-2xl'>Title</h2></CardHeader><CardBody>View a summary of all your customers over the last month.</CardBody><CardFooter>Footer text</CardFooter></Card>
Variants
There are three card variants available: elevated, outline & filled. Default is filled.
<div className='space-y-5'><Card variant='outline'><CardBody>Outlined Card variant.</CardBody></Card><Card variant='elevated'><CardBody>Elevated Card variant.</CardBody></Card></div>
Background colors
Use the Recastui theme colors to set the background color of the card. Default is main. Other colors available: ‘main’, ‘tomato’, ‘red’, ‘crimson’, ‘pink’, ‘plum’, ‘purple’, ‘violet’, ‘indigo’, ‘blue’, ‘cyan’, ‘teal’, ‘green’, ‘grass’, ‘orange’, ‘brown’, ‘sky’, ‘mint’, ‘lime’, ‘yellow’, ‘amber’, ‘gold’, ‘bronze’.
<div className='space-y-5'><Card bg='purple'><CardBody>Outlined Card variant.</CardBody></Card><Card bg='green' variant='outline'><CardBody>Outlined Card variant.</CardBody></Card><Card bg='amber' variant='elevated'><CardBody>Elevated Card variant.</CardBody></Card></div>
Hover state
Use the hoverState prop to set the hover state to hilight the background color of the card. Default is false.
<Card bg='pink' hoverState><CardBody>Card with a hover state.</CardBody></Card>
Size
Use the size prop to set the size of the card. Default is full. There are ten card sizes available: * ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘2xl’, ‘1/4’, ‘half’, ‘3/4’, ‘full’.
<div className='space-y-5'><Card size='xs' hoverState><CardBody>Card sized extra small.</CardBody></Card><Card size='sm' hoverState><CardBody>Card sized small.</CardBody></Card><Card size='md' hoverState><CardBody>Card sized medium.</CardBody></Card><Card size='full' hoverState><CardBody>Card sized full width.</CardBody></Card></div>
Recipes
Card with Image
Place the content within the CardBody to get a nice padding around.
<Card size='sm' className='divide-y divide-main-7'><CardBody><imgsrc='https://images.unsplash.com/photo-1567016432779-094069958ea5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80'alt='The Recasted Amber double sofa'/><div className='mt-6 spacing-y-3'><h2 className='text-xl my-2'>Stitch 3 Seater Velvet Sofa</h2><p>Pairing function and form to perfection, the super-cushy Stitch sofa is beautifully designed with a plush stitched backrest and high-density cushioning.</p><p className='text-2xl font-semibold mt-2'>$1299</p></div></CardBody><CardFooter><Button>Buy now</Button><Button variant='ghost'>Add to cart</Button></CardFooter></Card>
Horizontal Card
<Card className='flex flex-col sm:flex-row overflow-hidden'><img className='object-cover max-w-full sm:max-w-[200px]'src='https://images.unsplash.com/photo-1587080413959-06b859fb107d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'alt='Caffe Latte art on a white cup'/><div><CardBody><h2 className='text-xl'>Perfect latte art</h2><p className='py-2'>Ever wondered how to make latte art in your own kitchen? With this easy step by step guide you can start making your very own pieces of latte art today!</p></CardBody><CardFooter><Button>Buy me Coffee</Button></CardFooter></div></Card>
Props
Card
Prop | Type | Default Value | Description |
---|---|---|---|
className | string (optional) | Additional class names to apply | |
bg | ‘main’ | ‘tomato’ | ‘red’ | ‘crimson’ | ‘pink’ | ‘plum’ | ‘purple’ | ‘violet’ | ‘indigo’ | ‘blue’ | ‘cyan’ | ‘teal’ | ‘green’ | ‘grass’ | ‘orange’ | ‘brown’ | ‘sky’ | ‘mint’ | ‘lime’ | ‘yellow’ | ‘amber’ | ‘gold’ | ‘bronze’ | ‘main’ | Sets the background and border color of the card. Select from the available colors in the TrueColors type. |
hoverState | boolean | false | When set to true, the Card component will have a hover effect with a slightly darker background color. |
variant | ‘elevated’, ‘outline’, ‘filled’ | ‘filled’ | Determines the card’s appearance. ‘elevated’ adds a shadow, ‘outline’ adds a border, and ‘filled’ keeps the card solid. |
size | ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘2xl’, ‘1/4’, ‘half’, ‘3/4’, ‘full’ | ‘full’ | Sets the width and height of the card. Choose from predefined sizes or fractions. |
padding | ‘none’, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’ | ‘md’ | Sets the padding inside the card. Choose from predefined padding sizes or ‘none’ for no padding. |
rounded | ‘none’, ‘sm’, ‘md’, ‘lg’, ‘full’ | ‘none’ | Sets the border-radius of the card. Choose from predefined border-radius sizes or ‘none’ for square corners. |
CardHeader, CardBody, and CardFooter
Prop | Type | Description |
---|---|---|
children | React.ReactNode | The children for the component |
className | string (optional) | Additional class names to apply |