Skip to content
Caps0.4.0
API reference

components/card

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/card";

Exports

Section titled “Exports”
Kind Export Description
type alias CardProps Props accepted by Card.
type alias CenteredCardProps Props accepted by CenteredCard.
type alias CardHeaderProps A card header layout with optional centered alignment.
type alias CardTitleProps Props accepted by CardTitle.
constant Card A presentational card shell.
constant CenteredCard Center one primary card in a welcoming, viewport-filling page stage.
constant CardHeader Render a Caps card header with the requested alignment.
constant CardTitle A card title element.
constant CardDescription A card supporting-description element.
constant CardContent A card body layout.
constant CardFooter A card footer layout.

CardPropstype alias

Section titled “CardProps”
Signature
type CardProps = object & HTMLAttributes<HTMLDivElement>;

Props accepted by Card.

Type Declaration

Section titled “Type Declaration”
Name Type Description
variant? "surface" | "outline" | "interactive" | "game" | "fit" -
featured? boolean Emphasize a featured item without changing its interaction.
state? "empty" Present the absence of content within the same card shell.
density? "regular" | "compact" Reduce card section padding when several related details share a page.

CenteredCardPropstype alias

Section titled “CenteredCardProps”
Signature
type CenteredCardProps = CardProps & object;

Props accepted by CenteredCard.

Type Declaration

Section titled “Type Declaration”
Name Type
width? "default" | "wide"

CardHeaderPropstype alias

Section titled “CardHeaderProps”
Signature
type CardHeaderProps = object & HTMLAttributes<HTMLDivElement>;

A card header layout with optional centered alignment.

Type Declaration

Section titled “Type Declaration”
Name Type
alignment? "start" | "center"

CardTitlePropstype alias

Section titled “CardTitleProps”
Signature
type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & object;

Props accepted by CardTitle.

Type Declaration

Section titled “Type Declaration”
Name Type Description
level? 2 | 3 Heading level; the host keeps its document outline. Defaults to 3.

Cardconstant

Section titled “Card”
Signature
const Card: ForwardRefExoticComponent<
  object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

A presentational card shell.

CenteredCardconstant

Section titled “CenteredCard”
Signature
const CenteredCard: ForwardRefExoticComponent<
  object &
    HTMLAttributes<HTMLDivElement> &
    object &
    RefAttributes<HTMLDivElement>
>;

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

CardHeaderconstant

Section titled “CardHeader”
Signature
const CardHeader: ForwardRefExoticComponent<
  object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

Render a Caps card header with the requested alignment.

CardTitleconstant

Section titled “CardTitle”
Signature
const CardTitle: ForwardRefExoticComponent<
  HTMLAttributes<HTMLHeadingElement> &
    object &
    RefAttributes<HTMLHeadingElement>
>;

A card title element.

CardDescriptionconstant

Section titled “CardDescription”
Signature
const CardDescription: ForwardRefExoticComponent<
  HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>
>;

A card supporting-description element.

CardContentconstant

Section titled “CardContent”
Signature
const CardContent: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

A card body layout.

CardFooterconstant

Section titled “CardFooter”
Signature
const CardFooter: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

A card footer layout.