@loke/design-system
Version:
A design system with individually importable components
55 lines (54 loc) • 3.37 kB
text/typescript
import { type HTMLAttributes } from "react";
/**
* Card component for containing and organizing content
*
* The Card component provides a flexible container for displaying related content in a visually distinct and structured manner. It serves as a foundational element for creating various UI patterns such as product cards, user profiles, or information panels.
*
* Key features:
* - Provides a visually distinct container with rounded corners and a subtle shadow
* - Can be composed with CardHeader, CardContent, and CardFooter for structured layout
* - Customizable through className prop for tailored styling
* - Accessible, with proper semantic structure
*
* Usage considerations:
* - Use cards to group related information and actions
* - Maintain consistent padding and spacing within cards for a polished look
* - Consider using CardTitle and CardDescription within CardHeader for clear content hierarchy
* - Utilize CardFooter for actions or additional information related to the card's content
*/
declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
/**
* CardHeader component for the top section of a card
*
* This component is designed to contain the main identifying information of a card, such as its title and a brief description. It provides consistent spacing and layout for these elements.
*/
declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
centered?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
* CardTitle component for the title of a card
*
* This component renders the main heading of a card. It uses a larger font size and bold weight to stand out and provide clear identification of the card's purpose or content.
*/
declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLParagraphElement>>;
/**
* CardDescription component for additional text in a card
*
* This component is used to provide supplementary information or context for the card's content. It's styled with a smaller font size and muted color to visually distinguish it from the main content.
*/
declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
/**
* CardContent component for the main content area of a card
*
* This component is designed to contain the primary content of the card. It provides consistent padding and can house various types of content, from text to complex layouts.
*/
declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
/**
* CardFooter component for the bottom section of a card
*
* This component is used to contain elements that should appear at the bottom of the card, such as action buttons, links, or summary information. It provides consistent spacing and alignment for its contents.
*/
declare const CardFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
centered?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };