On this page

Layout & theming

Card released

A box for one thing on a dashboard: a title, a subtitle, an icon and actions above, anything in the body, and a footer that stays at the bottom. The whole card can be one link.

Source

Import@pacit/components/card
Selectorspct-card, [pctCardTitle], [pctCardSubtitle], a[pctCardLink], [pctCardControl]

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

21.4 °C

import { Component } from '@angular/core';
import { PctCard, PctCardSubtitle, PctCardTitle } from '@pacit/components/card';

/** A card: a title, a subtitle, a body and a footer that stays down. */
@Component({
  selector: 'demo-card',
  imports: [PctCard, PctCardTitle, PctCardSubtitle],
  template: `
    <pct-card style="inline-size: 240px">
      <h3 pctCardTitle>Heat pump</h3>
      <p pctCardSubtitle>Utility room</p>
      <p style="margin: 0; font-size: 24px">21.4 °C</p>
      <span pctCardFooter>Updated a moment ago</span>
    </pct-card>
  `,
})
export class CardDemo {}

card.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctCard, PctCardLink, PctCardTitle, PctCardSubtitle } from '@pacit/components/card';

Exported	What it is
`PctCardLink`componentunreleased`a[pctCardLink]`	The anchor that makes the whole card one link: the consumer's `<a>` inside the title, with its own `href` or `routerLink`, whose box is stretched over the card by a pseudo-element.
`PctCardControl`directiveunreleased`[pctCardControl]`	A control that answers on its own inside a card that is one link: it stands over the link's box, so a press on it is its own and not the link's. The header's actions and the footer's actions stand there already; this is for a control written in the body, or for a passage whose text must stay selectable, which then leaves the link.
`PctCardTitle`componentunreleased`[pctCardTitle]`	The card's title: the consumer's heading, at the level the page's outline needs, with the card's type on it and the browser's margins taken off.
`PctCardSubtitle`componentunreleased`[pctCardSubtitle]`	The line under the card's title: where the thing stands, or what kind it is.
`PctCard`componentunreleased`pct-card`	A card: a header of a title, a subtitle, an icon and actions, a body of anything, and a footer that stays at the bottom when the cards of a row stand at one height.

<pct-card>
  <h3 pctCardTitle><a pctCardLink routerLink="/devices/heat-pump">Heat pump</a></h3>
  <p pctCardSubtitle>Utility room</p>
  <p>21.4 °C</p>
  <span pctCardFooter>Updated a moment ago</span>
</pct-card>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

A card that is one link: a press anywhere opens it, and the switch answers on its own.

21.4 °C

Enabled

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

unreleased marks 8 of them: on main, and not in @pacit/components@0.2.0 — the next release names the version.

A card: a header of a title, a subtitle, an icon and actions, a body of anything, and a footer that stays at the bottom when the cards of a row stand at one height.

Inputs

Name	Type	What it does
`loading`unreleaseddefault `false`	`boolean`	Whether the card's content is on its way: the body gives way to the skeleton, and the card is `aria-busy` until it arrives. The header and the footer stay.
`error`unreleaseddefault `null`	`string \| null`	A message saying why the card has nothing to show, drawn in place of the body with the danger icon; `null` or `''` for none. `loading` wins while both are set: the answer is not in yet.
`muted`unreleaseddefault `false`	`boolean`	Whether the thing the card stands for is out of reach — a device that does not answer. The card stands on the skin's disabled surface and keeps its controls working; say why in the card's own words, because colours are the eye's alone.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-card`
`aria-busy`	`loading() ? "true" : null`
`data-pct-state`	`state()`
`data-pct-muted`	`muted() ? "" : null`
`data-pct-link`	`link() ? "" : null`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctCardHarness, PctCardTitleHarness, PctCardSubtitleHarness, PctCardLinkHarness, PctCardControlHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`actions`	`[data-pct-part="actions"]`	the region of the header's controls, at its end
`body`	`[data-pct-part="body"]`	the region of the body, or of the skeleton while loading
`footer`	`[data-pct-part="footer"]`	the row at the bottom of the card
`footer-actions`	`[data-pct-part="footer-actions"]`	the region of the footer's controls
`header`	`[data-pct-part="header"]`	the row of the icon, the heading and the actions
`heading`	`[data-pct-part="heading"]`	the column of the title and the subtitle
`icon`	`[data-pct-part="icon"]`	the region of the consumer's icon, at the header's start
`message`	`[data-pct-part="message"]`	the error message drawn in place of the body
`message-icon`	`[data-pct-part="message-icon"]`	the danger icon beside the message
`note`	`[data-pct-part="note"]`	the region of the footer's text

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-card-bg{pct.surface}`#ffffff · #0f172a	Background of the card.
`--pct-card-bg-muted{pct.surface-disabled}`#f1f5f9 · #1e293b	Background of a muted card.
`--pct-card-border{pct.border}`#e2e8f0 · #334155	Edge colour of the card.
`--pct-card-border-hover{pct.border-strong}`#64748b	Edge colour of a card that is one link, under the pointer.
`--pct-card-fg{pct.text}`#0f172a · #ffffff	Text colour of the card.
`--pct-card-fg-muted{pct.text-muted}`#334155 · #e2e8f0	Text colour of a muted card.
`--pct-card-footer-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of the card's footer.
`--pct-card-footer-font-size{pct.font.size.sm}`13px	Font size of the card's footer.
`--pct-card-gap{pct.space.4}`12px	Gap between the card's header, body and footer.
`--pct-card-header-gap{pct.space.3}`8px	Gap between the icon, the heading and the actions in the header.
`--pct-card-icon-color-danger{pct.danger}`#b91c1c · #f87171	Colour of the icon beside the card's error message.
`--pct-card-message-bg-danger{pct.danger-100}`#fee2e2 · #991b1b	Background of the card's error message.
`--pct-card-message-fg-danger{pct.on-danger-100}`#991b1b · #fee2e2	Text colour of the card's error message.
`--pct-card-padding-x{pct.space.5}`16px	Inline padding inside the card's edge.
`--pct-card-padding-y{pct.space.5}`16px	Block padding inside the card's edge.
`--pct-card-radius{pct.radius.md}`8px	Corner radius of the card.
`--pct-card-subtitle-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of the card's subtitle.
`--pct-card-subtitle-font-size{pct.font.size.sm}`13px	Font size of the card's subtitle.
`--pct-card-title-font-size{pct.font.size.lg}`16px	Font size of the card's title.
`--pct-card-title-font-weight{pct.font.weight.medium}`500	Font weight of the card's title.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-card-border: #99f6e4;
  --pct-card-border-hover: #0f766e;
  --pct-card-radius: 16px;
}

21.4 °C

Accessibility

Measured, not assumed

Pattern: none — the APG has no pattern for a card. The card writes no role; its heading is the consumer's, at the level the page's outline needs, and a card that is one link is the consumer's <a> in that heading. Named in the class JSDoc.

Keyboard

key	effect	test
`Tab` / `Shift+Tab`	moves to the card's link, then to its controls in order	`apps/sandbox-e2e/src/card.spec.ts` — "the keyboard meets the link, then the controls, and Enter follows the link"
`Enter`	on the link, follows it	the same case; the following is the platform's

There are no handlers to map: the link is an anchor and the controls are the consumer's, and each answers the keyboard on its own.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

100%mutation score5 of 5 mutants killed

9 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

9colour pairs measuredlight and dark, at every token build

2visual baselinesChromium, the sandbox's own pictures

13elements in the preview0 listeners · 1 render to settle · 1787 µs in jsdom, held exactly but for the clock

Known limitations

The text of a card that is one link cannot be selected. A drag over it selects nothing and a double click follows the link, in all three engines (0109). pctCardControl on a passage takes it out of the link.
A control in the body needs pctCardControl. Without it the control sits under the link's box and a press on it is the link's. A control is anything the consumer writes, so nothing can warn about one that was missed.
pctCardControl writes two inline declarations. position: relative and z-index: 1 stand on the element whether or not the card holds a link, so they override a position of the consumer's own, and two raised controls stack in their order in the document.
The card is its link's containing block. It is position: relative while it holds a link, so an absolutely positioned child of the card is placed against the card.
No elevation and no media slot. The card is a part of the page with an edge, not a sheet lifted over it; a picture is the consumer's element in the body.
NVDA does not say the link is a link. In the walk of 2026-11-02 NVDA with Firefox read the focused title as Heat pump, heading, where Orca says link. The element is an <a href> in an <h3>, and Enter follows it; whether the stretched box changes what NVDA reads is for the next walk to measure against a plain link in a heading.
An error is not announced. The message is drawn, not spoken: a page of cards loading at once would raise a role="alert" per card that failed. A failure the user is waiting for is the application's to say, with a toast or the announcer.
Muted is a colour. It says nothing to a reader; the card's words must say why.

pacit

Heat pump

Usage

Every state, running

A card that is one link: a press anywhere opens it, and the switch answers on its own.

Heat pump

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Heat pump

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Known limitations