Card

Card is a container for text, photos, and actions in the context of a single subject.

import { Card } from '@nextui-org/react';

Default

NextUI will wrap your content in a Card.Body component.

Bordered

You can change the full style towards a bodered Card with the bordered property.

Hoverable

You can apply a fancy hover animation with the hoverable property.

Clickable

You can use the clickable property to allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior.

Colors

You can change the color of the Card with the property color.

With divider

You can use the Divider component to split the Card sections.

You can use the Card.Footer component to add actions, details or another information to the Card.

Cover Image

You can use the cover prop and Card.Image component to add a coverred image to the Card.Body. NextUI automatically applies object-fit: cover to the inner image.

Primary Action

You can use the clickable property to allow users to interact with the Card.

APIs

Card Props

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange card colordefault
shadowbooleantrue/falseDisplay shadow effecttrue
borderedbooleantrue/falseBordered cardfalse
animatedbooleantrue/falseDisplay drip, shadow, hover and scale animationtrue
hoverablebooleantrue/falseDisplay a translate and shadow animation on hoverfalse
clickablebooleantrue/falseAllow users to interact with the cardfalse
coverbooleantrue/falseIt removes the Card.Body padding and set the property object-fit: cover to the imagefalse
borderWeightNormalWeightsNormalWeightsBorder weight for bordered cardnormal
onClickMouseEventHandler-Clickable card click handler-
refRef<HTMLDivElement | null>-forwardRef-
...HTMLAttributes'id', 'className', ...Native props-

Card.Header Props

AttributeTypeAccepted valuesDescriptionDefault
...HTMLAttributes'id', 'className', ...Native props-

Card.Body Props

AttributeTypeAccepted valuesDescriptionDefault
...HTMLAttributes'id', 'className', ...Native props-

Card.Footer Props

AttributeTypeAccepted valuesDescriptionDefault
blurbooleantrue/falseMakes the card footer container blurfalse
...HTMLAttributes'id', 'className', ...Native props-

Card.Image Props

AttributeTypeAccepted valuesDescriptionDefault
srcstring-Image source-
widthstring number% px rem emDetermine the width of the card image100%
heightstring number% px rem emDetermine the height of the card imageauto
showSkeletonbooleantrue/falseShow skeleton effect whereas the image is loadingtrue
objectFitObjectFitObjectFitCSS "object-fit" propertyscale-down
maxDelay(ms)number-Max duration of the skeleton animation3000
autoResizebooleantrue/falseEnables zooming when width is too smalltrue
...ImgHTMLAttributes'id', 'className', 'alt' ...Native props-

Card types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';

Object Fit

type ObjectFit =
  | 'contain'
  | 'cover'
  | 'fill'
  | 'none'
  | 'scale-down'
  /* Global values */
  | 'inherit'
  | 'initial'
  | 'revert'
  | 'unset';