Skip to content
Caps

components/card

Type Aliases

Section titled “Type Aliases”

CardProps

Section titled “CardProps”

CardProps = object & HTMLAttributes<HTMLDivElement>>

Props accepted by Card.

Type Declaration

Section titled “Type Declaration”
variant?
Section titled “variant?”

optional variant?: "surface" | "outline" | "interactive" | "arcade" | "arcadeSpotlight" | "arcadeStage" | "arcadeEmpty" | "game" | "fit" | "gameShare"

density?
Section titled “density?”

optional density?: "regular" | "compact"

Reduce card section padding when several related details share a page.

CenteredCardProps

Section titled “CenteredCardProps”

CenteredCardProps = CardProps & object

Props accepted by CenteredCard.

Type Declaration

Section titled “Type Declaration”
width?
Section titled “width?”

optional width?: "default" | "wide"

CardHeaderProps

Section titled “CardHeaderProps”

CardHeaderProps = object & HTMLAttributes<HTMLDivElement>>

A card header layout with optional centered alignment.

Type Declaration

Section titled “Type Declaration”
alignment?
Section titled “alignment?”

optional alignment?: "start" | "center"

Variables

Section titled “Variables”

Card

Section titled “Card”

const Card: ForwardRefExoticComponent<object & HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

A presentational card shell.

CenteredCard

Section titled “CenteredCard”

const CenteredCard: ForwardRefExoticComponent<object & HTMLAttributes<HTMLDivElement> > & object & RefAttributes<HTMLDivElement>>>>

Center one primary card in a welcoming, viewport-filling page stage.

CardHeader

Section titled “CardHeader”

const CardHeader: ForwardRefExoticComponent<object & HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

Render a Caps card header with the requested alignment.

CardTitle

Section titled “CardTitle”

const CardTitle: ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> > & RefAttributes<HTMLHeadingElement>>>>

A card title element.

CardDescription

Section titled “CardDescription”

const CardDescription: ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> > & RefAttributes<HTMLParagraphElement>>>>

A card supporting-description element.

CardContent

Section titled “CardContent”

const CardContent: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

A card body layout.

CardFooter

Section titled “CardFooter”

const CardFooter: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

A card footer layout.