# Card Use card when several pieces of related information should stay together as one scanable unit. Good cards have a clear hierarchy, concise actions, and only enough chrome to separate one record from another. Prefer focused layouts over generic content dumping. ## Import ```ts import { CardComponent } from 'ui'; ``` ## Basic content grouping ```ts import { Component } from '@angular/core'; import { ButtonComponent, CardComponent, BadgeComponent } from 'ui'; @Component({ selector: 'app-card-basic-demo', standalone: true, imports: [ButtonComponent, CardComponent, BadgeComponent], template: `
Quarterly planning 6 milestones aligned across product and engineering

Keep the primary summary short and push secondary details into compact metadata or follow-up views.

Open Share
Support inbox 14 unresolved conversations

Outline cards work well when the surrounding page already has elevation and you only need clear grouping.

`, }) export class CardBasicDemoComponent {} ``` ## Appearance, border, and orientation ```ts import { Component } from '@angular/core'; import { CardComponent } from 'ui'; @Component({ selector: 'app-card-surfaces-demo', standalone: true, imports: [CardComponent], template: `
Filled Dense, default emphasis
Filled alternative Slightly richer surface for nested modules
Subtle Low-chrome shell for already structured layouts
Outline Good when the surrounding page already supplies elevation and grouping
Soft shell Remove the border when cards should feel more like quiet content sections
Dashed border Use border style when the shell should feel more editorial, draft-like, or utility-oriented
Horizontal layout Better when a preview should sit beside short metadata instead of above it

Horizontal cards are useful for compact media rows, attachment previews, and list-style summaries.

`, }) export class CardSurfacesDemoComponent {} ``` ## Focus modes for embedded actions ```ts import { Component } from '@angular/core'; import { ButtonComponent, CardComponent } from 'ui'; @Component({ selector: 'app-card-focus-mode-demo', standalone: true, imports: [ButtonComponent, CardComponent], template: `
Focus the cards below with Tab. On no-tab and tab-exit, press Enter on the card root to move into the inner actions.
focusMode="off" Card acts as a surface; inner buttons use normal tab order
Open Archive
focusMode="tab-only" Tab from the card root moves directly into the first embedded control
Inspect Share
focusMode="no-tab" Tab loops inside the card actions until Escape returns focus to the root
Review Assign
focusMode="tab-exit" Tab can leave the card after the last action; Shift+Tab returns to the root
Resolve Mute
`, }) export class CardFocusModeDemoComponent {} ``` ## Selection and checkbox patterns ```ts import { Component, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, CardComponent, CardOnSelectionChangeEvent, CheckboxComponent } from 'ui'; @Component({ selector: 'app-card-selection-demo', standalone: true, imports: [FormsModule, ButtonComponent, CardComponent, CheckboxComponent], template: `
Click-anywhere selection Useful for galleries or bulk management where the whole tile represents one choice
Projected checkbox Better when users expect an explicit selection affordance instead of a surface click
Surface card: {{ surfaceSelected() ? 'selected' : 'not selected' }} Checkbox card: {{ checkboxSelected() ? 'selected' : 'not selected' }}
Reset
`, }) export class CardSelectionDemoComponent { protected readonly surfaceSelected = signal(true); protected readonly checkboxSelected = signal(false); protected onSurfaceSelectionChange(event: CardOnSelectionChangeEvent): void { this.surfaceSelected.set(event.data.selected); } protected onCheckboxSelectionChange(event: CardOnSelectionChangeEvent): void { this.checkboxSelected.set(event.data.selected); } protected onProjectedCheckboxChange(value: boolean): void { this.checkboxSelected.set(!!value); } protected reset(): void { this.surfaceSelected.set(true); this.checkboxSelected.set(false); } } ``` ## Floating actions and projected slots ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, CardComponent } from 'ui'; @Component({ selector: 'app-card-floating-actions-demo', standalone: true, imports: [ButtonComponent, CardComponent], template: `
Floating utility action Keep the body clean when the action is secondary but should stay immediately visible

Pinned state: {{ pinned() ? 'pinned' : 'not pinned' }}

Preview slot
Projected slots uiCardPreview and uiCardFloatingAction adapt the same primitive to richer record layouts
`, }) export class CardFloatingActionsDemoComponent { protected readonly pinned = signal(true); protected togglePinned(): void { this.pinned.update(value => !value); } } ``` ## Composition patterns ```ts import { Component } from '@angular/core'; import { AvatarComponent, ButtonComponent, CardComponent } from 'ui'; @Component({ selector: 'app-card-composition-demo', standalone: true, imports: [AvatarComponent, ButtonComponent, CardComponent], template: `
Noise-canceling headphones $249 ยท In stock

Keep commerce cards focused on product value, stock state, and one primary purchase action.

Add to cart Compare
Adriana Nowak Senior Product Designer

Profile cards work best when they answer who this person is, what they own, and the next likely action.

Design systems Research ops
Message View profile
`, }) export class CardCompositionDemoComponent {} ``` ## Accessibility ### Accessible name `CardComponent` should expose a meaningful name when it is interactive, selectable, or focusable. Use `ariaLabel`, `ariaLabelledBy`, and `ariaDescribedBy` to tie the surface to visible title and supporting text instead of leaving screen readers with a generic group. ### Keyboard Keyboard behavior depends on `focusMode`, `interactive`, and selection settings. | Key | Action | | --- | --- | | Tab | Moves to the card when it is focusable, or through inner controls according to `focusMode`. | | Enter / Space | Activates selection or `cardClick` when focus is on the card root. | | Enter | In `no-tab` and `tab-exit`, enters inner action navigation when focus is on the card root. | | Escape | Leaves active focus mode and returns focus to the card root. | | Tab / Shift+Tab | Cycles or exits inner controls depending on `focusMode`. | ### Semantics Card uses `role="group"` by default and can expose `aria-selected` when selection is enabled. This is appropriate for grouped content surfaces, but card is not a replacement for semantic list markup, links, or buttons. | Aspect | Behavior | | --- | --- | | Default role | `group` | | Selection state | `aria-selected` when selection is enabled | | Disabled state | `aria-disabled="true"` when disabled | | Focus target | the card root when focusable; inner controls depend on `focusMode` | | Name source | `ariaLabel`, `ariaLabelledBy`, or visible projected content |