Runway

Card Title

This is a basic card with default settings.

Colored Card

This card has a soft orange style.

Scalable Card

This card scales up on hover.

Custom Styled Card

This card has custom styles (color, variant, hover...)

The Card component is a flexible component that can be used to display content in a structured and visually appealing way. It comes with animation and hover effects that can be customized to fit your design needs.

Check out the CustomCards page for pre-styled custom cards.

Usage

javascript
1import Card from "@/components/atoms/Card";
2
3<Card>
4    <h2>Card Title</h2>
5    <p>This is a basic card with default settings.</p>
6</Card>

Props

Prop	Type	Default	Description
children	ReactNode	-	The content of the card.
padding	number	`24`	The padding of the card (in px).
color	string	`"primary"`	The base color (use tailwind.config).
variant	"soft" \| "solid"	`"solid"`	The variant of the card.
borderRadius	string	`"2xl"`	The border radius of the card.
shadow	boolean	`false`	If true, adds a subtle box-shadow.
hoverShadow	boolean	`false`	If true, applies a hover shadow.
hoverBg	boolean	`false`	If true, applies a hover background color.
scale	boolean	`false`	If true, gently scales up on hover.
lift	boolean	`false`	If true, lifts on hover.
active	boolean	`false`	If true, the card has an active press-down scale effect.
outline	boolean	`false`	If true, adds an outline effect on hover.
border	boolean	`false`	If true, adds a border.
href	string	`""`	The URL to navigate to when the card is clicked.
onClick	function	-	The click handler for the card.
className	string	`""`	Additional Tailwind utility classes.
...props	object	-	Any other valid HTML attributes for the card.

Apply your own styling with the className prop for custom colors or advanced styling.

Examples

Basic Card

Card Title

This is a basic card with default settings.

Card with Hover Effects

You can add and combine various hover effects using the hoverBg, hoverShadow scale, lift, and outline props. You can also use active to enable the press-down scale effect.

Card with Background and Shadow

This card changes background color on hover.

Card with Scale Effect

This card scales up on hover.

Card with Lift + Shadow Effect

This card lifts on hover.

Card with Outline Effect

This card has an outline effect on hover.

Card with Scale and Active Effect

This card scales up on hover and has a press-down effect.

The press-down effect will be enabled in onClick or href is provided. You can use active to enable it manually or disable it.

Card with Styling

Use the color, variant, borderRadius, border, and shadow props to customize the card's appearance.

Soft Orange Card

This card has a color prop.

Custom Styled Card

This card has custom styles.

Card with Border and Shadow

This card has a border and shadow.

Experiment with different combinations of props to create cards that fit your design needs. Or if you want to skip the styling, check out the CustomCards page for pre-styled custom cards.