@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
70 lines (69 loc) • 2.23 kB
TypeScript
import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';
import { AsChildProp } from '../../utils/misc';
export declare const cardVariants: {};
export declare const cardVariance: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariance> {
asChild?: AsChildProp;
}
/**
* Card component for displaying content in a contained, styled container.
*
* Cards are used to group related information and actions, providing a clear visual hierarchy.
* They can contain various elements like headers, content sections, and footers.
*
* @example
* ```tsx
* <Card>
* <CardHeader>
* <CardTitle>Card Title</CardTitle>
* </CardHeader>
* <div className="p-5">Card content goes here</div>
* </Card>
* ```
*
* @example
* ```tsx
* // Using asChild to render as a different element
* <Card asChild>
* <article>Card content as an article</article>
* </Card>
* ```
*/
export declare const Card: ({ className, asChild, ...props }: CardProps) => import("react").JSX.Element;
type CardHeaderProps = ComponentProps<"div">;
/**
* Header component for {@link Card}.
*
* Provides consistent spacing and layout for card headers.
* Typically contains a {@link CardTitle} and optionally other content like descriptions or actions.
*
* @example
* ```tsx
* <Card>
* <CardHeader>
* <CardTitle>Card Title</CardTitle>
* <p className="text-sm text-muted-foreground">Card description</p>
* </CardHeader>
* <div className="p-5">Card content</div>
* </Card>
* ```
*/
export declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react").JSX.Element;
type CardTitleProps = ComponentProps<"p"> & {
asChild?: AsChildProp;
};
/**
* Title component for {@link CardHeader|card headers}.
*
* Provides consistent styling for card titles. Typically wrapped by {@link CardHeader}.
*
* @example
* ```tsx
* <CardHeader>
* <CardTitle>Settings</CardTitle>
* </CardHeader>
* ```
*/
export declare const CardTitle: ({ className, asChild, ...props }: CardTitleProps) => import("react").JSX.Element;
export {};