Card
stable 0.9 kB<hk-card>A surface with four optional slots — media, header, body, footer — that collapse cleanly when unused, so one component covers every card on the page. None of them implies another: showing the media does not oblige you to drop the copy, and dropping the copy does not take the media with it. The card supplies only the padding and the rules between whatever is actually there, so an omitted slot leaves no stray line or gap.
#surface#panel
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| media | TemplateRef | null | null | Media slot. Independent of the rest — showing it does not oblige you to drop the copy, and dropping the copy does not take it with you. |
| mediaPosition | 'top' | 'left' | 'top' | Media above the content, or beside it as a rail. |
| dividers | boolean | true | Rules between the slots that are actually present. An empty slot leaves no stray line or gap. |
| interactive | boolean | false | Adds hover lift and makes the whole card the click target. |
| padding | string | '1rem' | Inner padding for the body slot. |
Outputs
activatedEventEmitter<Event>Emits on click or Enter when interactive.
Keyboard
- Enter / Space Activates an interactive card
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-card-bg | #ffffff | Surface colour. |
| --hk-card-radius | 16px | Corner radius. |
| --hk-card-border | #e2e8f0 | Hairline border. |
Accessibility
- An interactive card becomes one focusable control rather than a div with a click handler.
- Media carries an empty alt when decorative, so it is skipped rather than announced as a filename.