# A bordered surface that groups related content, with an optional header (title and description), content area, and footer for actions, such as a settings section or an item in a grid. Intents: `container`, `surface`. ## Attributes - `variant` (`default` | `outline`): Visual style variant. Outline removes the shadow. Default: `default`. ## Slots - `default`: Card content. Use aihio-card-header, aihio-card-content, aihio-card-footer for structure. ## Card header container. ## Card title text. ## Card description text. ## Card main content area. ## Card footer with actions. ## Accessibility obligations - (warn, card-click-handler) When card acts as a link or button (entire surface is clickable, or it has a click handler): Wrap the card in an or attach role="button" + keyboard handlers on the outer element. aihio-card itself has no interactive role. ## Examples ### Header, content, and footer ```html Card Title Card description.

Card content here.

 Action ``` ## Mistakes ### Title must live inside aihio-card-header, not directly inside aihio-card. Don't (aihio lint: invalid-child): ```html Hi ``` Do: ```html Hi ``` ### Clickable cards need keyboard-accessible semantics. Wrap the card in a link, or add role="button" plus keyboard handlers to the interactive surface. Don't (aihio lint: card-click-handler): ```html

Open details

 ``` Do: ```html

Open details

 ```