Docs / Components
SenseCardComponent
Content surface from @artificialsenselabs/ui with optional header, footer, elevation, and dismiss action.
Live demo: run nx serve showcase and open /components/card (port 4202).
Overview
Category: Layout. Selector: sense-card. Import: import { SenseCardComponent } from '@artificialsenselabs/ui';
<sense-card subtitle="Updated today">
<span card-header>Account</span>
<p>Body content.</p>
</sense-card>Content slots
| Selector | Region |
|---|---|
[card-header] | Header title (linked via aria-labelledby when not hoverable). |
[card-subtitle] | Optional secondary header line (projected). |
(default) | Main body content. |
[card-footer] | Footer actions row. |
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
elevation | 'none' | 'low' | 'medium' | 'high' | 'medium' | Shadow depth token. |
bordered | boolean | false | Visible border treatment. |
hoverable | boolean | false | Interactive surface (role="button"); set ariaLabel. |
closable | boolean | false | Dismiss via sense-icon-button; emits closed. |
headerIcon | SenseIconName | null | null | Leading header glyph. |
subtitle | string | null | null | Programmatic subtitle under the title. |
showHeader / showFooter | boolean | null | null | Force region visibility; default shows both regions. |
ariaLabel | string | null | null | Name for hoverable cards. |
closeAriaLabel | string | null | null | Close button label; falls back to card.close i18n. |
Accessibility
- Static cards use
aria-labelledbypointing at the header title id. - Hoverable cards use
role="button"— provideariaLabel. - Close control is a labelled
sense-icon-button. - Hover lift animation pauses under
prefers-reduced-motion.