@payfit/unity-components
Version:
56 lines (55 loc) • 1.89 kB
TypeScript
import { PropsWithChildren } from 'react';
export interface CardTitleProps extends PropsWithChildren {
/** The heading level for the title. Defaults to 3 */
level?: 1 | 2 | 3 | 4 | 5 | 6;
/** Whether to visually hide the title (still accessible to screen readers) */
isHidden?: boolean;
}
/**
* The `CardTitle` component renders the title for a Card. It provides semantic heading structure
* and ensures proper accessibility labeling for the Card container.
*
* Use CardTitle when you need to give your Card a visible or screen-reader-accessible title.
* You can configure the heading level, apply custom styles, or hide it visually while maintaining
* accessibility.
* @param {CardTitleProps} props - The props for the `CardTitle` component
* @example
* ```tsx
* import { Card, CardTitle } from '@payfit/unity-components'
*
* function Example() {
* return (
* <Card>
* <CardTitle>My Card Title</CardTitle>
* <p>Card content goes here</p>
* </Card>
* )
* }
* ```
* @example
* ```tsx
* // Custom heading level
* <Card>
* <CardTitle level={2}>Important Section</CardTitle>
* <p>Content...</p>
* </Card>
* ```
* @example
* ```tsx
* // Hidden title for accessibility
* <Card>
* <CardTitle isHidden>Screen reader only title</CardTitle>
* <p>Visual content that describes itself</p>
* </Card>
* ```
* @see {@link CardTitleProps} for all available props
* @remarks
* - The title is required for accessibility unless the Card has an `aria-label`
* - Use `isHidden` to hide the title visually while keeping it accessible
* - The default heading level is 3, but you can configure it based on your page structure
*/
declare function CardTitle({ children, level, isHidden }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
declare namespace CardTitle {
var displayName: string;
}
export { CardTitle };