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

Editable Example

<Card>
	<CardBody>
		View a summary of all your customers over the last month.
	</CardBody>
</Card>

Card with Header & Footer

Editable Example

<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.

Editable Example

<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’.

Editable Example

<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.

Editable Example

<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’.

Editable Example

<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.

Editable Example

<Card size='sm' className='divide-y divide-main-7'>
  <CardBody>
    <img
      src='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

Editable Example

<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