shelving/ui/block/Card.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement } from "react";
import { type ClickableProps } from "../form/Clickable.js";
import { type ColorVariants } from "../style/Color.js";
import { type PaddingVariants } from "../style/Padding.js";
import { type SpacingVariants } from "../style/Spacing.js";
import { type Status } from "../style/Status.js";
import { type ThicknessVariants } from "../style/Thickness.js";
import { type TypographyVariants } from "../style/Typography.js";
import { type WidthVariants } from "../style/Width.js";
export interface CardProps extends ClickableProps, ColorVariants, PaddingVariants, SpacingVariants, ThicknessVariants, TypographyVariants, WidthVariants {
    /** Status colour for the card (e.g. `status="success"`). */
    status?: Status | undefined;
}
/**
 * Cards are boxed areas for content to sit within — rendered as `<article>` since each card represents a self-contained piece of content.
 * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
 * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
 * - Accepts a `status` colour and raw `ColorVariants` — the card styles the box; lay out its contents however the use case needs.
 *
 * @example <Card><Subheading>Static</Subheading></Card>
 * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
 * @example <Card status="error"><Subheading>Not found</Subheading></Card>
 */
export declare function Card({ children, href, onClick, title, status, ...props }: CardProps): ReactElement;