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.

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

Example

Jane Doe

DOB: 1980-05-12

NHS: 943 476 5919

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>