AddressographBox

An addressograph-box is a box that shows a person's identification details, such as name, date of birth, tracking information (e.g., medical record number, patient number), and salient notations (e.g., allergy alerts, fall risk).

This headless component renders a <div> with class addressograph-box. The consumer supplies the identifying fields, layout, and any salient warning iconography as children.

Example

Jane Doe

DOB: 1980-05-12

NHS: 943 476 5919

Ward: A3

Show demo markup

<div class="addressograph-box" aria-label="Patient identification"><p>Jane Doe</p><p>DOB: 1980-05-12</p><p>NHS: 943 476 5919</p><p>Ward: A3</p></div>

Usage example

<AddressographBox label="Patient identification">
  <p>Jane Doe</p>
  <p>Date of birth: 1980-05-12</p>
  <p>NHS number: 943 476 5919</p>
  <p>Ward: A3</p>
  <p>Allergy alert: penicillin</p>
</AddressographBox>

Show Svelte source

// In your Svelte component:
import AddressographBox from "lily-design-system-svelte-headless/components/AddressographBox/AddressographBox.svelte";

<AddressographBox label="Patient identification">
  <p>Jane Doe</p>
</AddressographBox>

Props

label: string (optional) -- accessible label for the addressograph-box box
children: slot (required) -- identifying content (name, DOB, identifier, notations)
...restProps: Any additional HTML attributes

ARIA

aria-label -- describes the box for screen readers (e.g., "Patient identification")

When to Use

Use to display a single subject's identifying details together in a compact, scannable block.
Use in clinical contexts to show patient identification alongside admission, ward, and salient alert information.
Use in logistics or mail-handling contexts to show recipient details and tracking information together.
Use when staff need to verify identity at a glance before performing an action.

Related components

person — a person component that contains other person-related information
government-identifier — an identifier section with a parent agency logo, agency name, and required government links

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

Component: addressograph-box
PascalCase: AddressographBox
Description: a box that shows a person's identification details, such as name, tracking information, and salient notations
Status: experimental — recent catalog addition with the least accumulated depth; contract may still move
HTML tag: <div>
CSS class: .addressograph-box
Interactive: no

ARIA

aria-label -- describes the box for screen readers

Keyboard

None -- the addressograph-box is informational, not interactive

Props

label: string (optional) -- accessible label for the addressograph-box box
children: slot (required) -- identifying content
...restProps: Any additional HTML attributes