Card
BaselineGroup related content into one distinct surface.
Example
Your preferences
Make this space work for you.
Choose what you want to hear about and keep your profile up to date.
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Card, CardHeader, CardTitle, CardDescription, CardContent } from 'panel-ui-kit/card'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Card> <CardHeader> <CardTitle>Your preferences</CardTitle> <CardDescription>Make this space work for you.</CardDescription> </CardHeader> <CardContent>Choose what you want to hear about.</CardContent> </Card> </PanelUiTheme> );}When to use
Use the named header, title, description and content parts. Put any action inside the card rather than making the whole surface a button.
Keyboard
The surface is not interactive. Controls placed inside retain their normal keyboard behavior.
Properties
| Property | Values | Default |
|---|---|---|
children | ReactNode | — |
className | Composition styles | — |
motion | full · reduced · off · object | Inherited |