@askrjs/themes/card

Cardtype

Card: (props: CardProps) => JSX.Element

Root card container; applies the card class and an optional variant modifier.

CardActiontype

CardAction: (props: CardActionProps) => JSX.Element

Renders an action/control region of a {@link Card}, typically positioned alongside the header.

CardActionPropstype

CardActionProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardAction } component.

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

CardContenttype

CardContent: (props: CardContentProps) => JSX.Element

Renders the main content region of a {@link Card}.

CardContentPropstype

CardContentProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardContent } component.

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

CardDescriptiontype

CardDescription: (props: CardDescriptionProps) => JSX.Element

Renders a {@link Card}'s supporting description text.

CardDescriptionPropstype

CardDescriptionProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}

Props for the {@link CardDescription } component.

children

children?: unknown;

ref

ref?: Ref<HTMLParagraphElement>;

CardFootertype

CardFooter: (props: CardFooterProps) => JSX.Element

Renders the footer region of a {@link Card}.

CardFooterPropstype

CardFooterProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardFooter } component.

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

CardHeadertype

CardHeader: (props: CardHeaderProps) => JSX.Element

Renders the header region of a {@link Card}.

CardHeaderPropstype

CardHeaderProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link CardHeader } component.

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

CardPropstype

CardProps: DivProps & {
  children?: unknown;
  variant?: CardVariant;
  ref?: Ref<HTMLDivElement>;
}

Props for the {@link Card } component.

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

variant

variant?: CardVariant | undefined;

CardTitletype

CardTitle: (props: CardTitleProps) => JSX.Element

Renders a {@link Card}'s title, defaulting to an <h3> (override with titleAs).

CardTitleHeadingTagtype

CardTitleHeadingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Heading tag allowed for a card's title via titleAs.

CardTitlePropstype

CardTitleProps: HeadingProps & {
  children?: unknown;
  /** Choose the level that follows the surrounding document hierarchy. */
  titleAs?: CardTitleHeadingTag;
  ref?: Ref<HTMLHeadingElement>;
}

Props for the {@link CardTitle } component.

children

children?: unknown;

ref

ref?: Ref<HTMLHeadingElement>;

titleAs

Choose the level that follows the surrounding document hierarchy.

CardVarianttype

CardVariant: "default" | "raised"

Visual style of a {@link CardProps} card.