Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  3. Call Card
  5. Usage

Call Card

Usage

Import @prepared911/ui/blocks/call-card from its subpath. Load @prepared911/ui/styles.css once at the document root.
CallCard is one call in a call list, drawn as the call row of the design: a line badge, then a column with the channel glyph and phone number, the elapsed timer, the address with an incident type tag, and the caller's name. It replaces EventCard.
Line, channel, and fields
Only line, startedAt, and elapsedLabel are required. Every other part is absent when its prop is, and the rows close up.
  • line is { kind, label }. kind picks the badge paint: Emergency (destructive solid), NonEmergency (accent solid), or Other (neutral). label is the badge text, such as 911 or 311. The text names the line; the fill only supports it.
  • channel is { icon, label }. The glyph is decorative and the label is read before the phone number. Pass the glyph for the channel: the block imports none.
  • phoneNumber, address, incidentType, and callerName are data. Pass a DisplayValue, or a LocalizedMessage for copy.
  • locale sets the timer's digits. Pass it when the page is server rendered.
Press and selection
Pass onClick and the whole card is one button that opens the call: one tab stop, with hover, press, and keyboard focus states. The card holds no other control. Without onClick the card is plain content.
selected marks the call being worked with aria-current="true" and a wash. Only one card in a list should be selected.
Incident tag placement
The tag sits at the end of the address line. When the address is too long to share the line, pass incidentPlacement={CallCardIncidentPlacement.CallerName}: the address then takes its own line and the tag moves to the end of the caller name line. The block does not measure; the caller decides.
The timer
The timer counts from startedAt and shows hh:mm:ss in the monospace role with tabular digits, so its width does not move. It ticks once a second on the window that shows it, pauses while that window is hidden, and catches up when it is visible again. Pass now to freeze it at an instant, for server rendering, tests, and stories.
Assistive technology does not hear the ticking. elapsedLabel takes the whole minutes and returns the sentence that is read with the card, such as "On the line for 3 minutes". It refreshes once a minute and is not a live region.
Long content
Address, caller name, and phone number wrap and are never truncated. A value with no break opportunities breaks anywhere, so it stays inside the row.
Lists and hosts
CallCardList is a named ul; its cards are list items. A card outside a list, such as one in a popover, passes host={CallCardHost.Block} and renders a div.
Right to left
Layout mirrors. The phone number, address, caller name, and timer are dir="auto" runs: a number reads left to right inside Hebrew text, and an English address keeps its order.
Previous
Banner region / Accessibility
Next
Call Card / API and Development
On this page
Line, channel, and fields
Press and selection
Incident tag placement
The timer
Long content
Lists and hosts
Right to left