Command Palette
Search for a command to run...
Card
Decorative container for grouping related content with border and shadow.About Card
Versatile layout component for organizing and visually separating content sections within a page. Includes sub-components (CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter) for building complete card layouts with consistent styling and spacing.Installation
Import the Card component from LSD:import { Card } from '@nipsys/lsd'
export default function MyComponent() {
return <Card />
}Usage
The simplest form of the component with default styling.Complete
Composition
Card
├── CardHeader
│ ├── CardTitle
│ ├── CardDescription
│ └── CardAction
├── CardContent
└── CardFooter
Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through interactive elements within the card
ARIA Attributes
Proper ARIA attributes for screen readers
• Use aria-label or aria-labelledby on card when it contains focusable elements and lacks visible heading• Card itself has no ARIA role by default (layout container)
Focus States
Visible focus indicators for keyboard users
• Card is a layout container and not focusable by default. Focus moves through interactive elements (buttons, links, inputs) within the card using Tab navigation. The card itself becomes focusable only if interactive attributes (onClick, tabIndex) are added.