Person card
A bold, at-a-glance person status card for Home Assistant Lovelace dashboards. Four cards in one package — Person, Family, Family Grid, and Theme — with a full visual editor and no YAML required.
MS
Mark
Home
iPhone 82%
MacBook 34%
last seen 2 min ago
Features
- Four cards in one package. Person, Family, Family Grid, and Theme — all registered from a single JS file.
- Five size tiers with adaptive auto mode. Small, medium, large, hero, and stats — or let ResizeObserver pick automatically.
- Zone-based styling with one-click auto-detect from HA. Custom background, border, icon, and label per zone. Reads your zone.* entities automatically.
- Per-device battery bars and connectivity dots. Colour-coded bars with configurable low-battery thresholds per device.
- Family Grid Card with animated breathing glow rings. Home members pulse slowly; everyone else pulses faster to draw the eye.
- Full GUI editor — no YAML required. Live card picker preview with real HA entities. Five tabs per card.
Install
One-click install via the Home Assistant Community Store. Updates land automatically.
01
Open HACS → Frontend → Custom repositories. Add this URL as type
Lovelace:
https://github.com/squizzer73/lovelace-person-card
02
Install
person-card, then add the resource to your Lovelace config
(HACS handles this on most setups).
03
Or hit the badge:
HACS Open in My Home Assistant
Drop the file into your custom panel and register it as a Lovelace resource.
01
Download
person-card.js from the latest release and place it
under /config/www/.
02
Add the resource (Settings → Dashboards → ⋮ → Resources):
url: /local/person-card.js type: module
03
Reload the frontend (Ctrl/Cmd-Shift-R) and add the card from the picker.
Configuration
| Option | Type | Default | Description |
|---|---|---|---|
| type | string | required | Always custom:person-card (or family-card, family-grid-card, person-card-theme). |
| person_entity | string | required | person.* entity ID to display. |
| size | string | auto | Size tier: auto · small · medium · large · hero · stats. Auto scales live via ResizeObserver. |
| zone_styles | list | [] | Per-zone colour, icon, and label overrides. Use the Appearance tab or Auto-detect zones from HA button in the editor. |
| devices | list | [] | Tracked devices. Each entry takes entity, battery_entity, connectivity_entity, and optional battery_threshold. |
| show_last_seen | boolean | true | Show last-seen timestamp (large and hero sizes). |
| address_entity | string | | Geocoded address sensor. Shown when the person is outside all defined zones; long strings use a scrolling ticker. |
| offline_threshold | number | | Minutes without an update before the avatar is marked stale. Avatar dims and a clock badge appears. |
| conditions | list | [] | AND/OR condition rules that change background, border, and notification badge based on any HA entity state. |
Changelog
v0.7.1 28 Apr 2026
- Family Grid Card bundled into person-card.js — no separate resource file needed.
- Fix: family-grid-card was missing from the HACS-registered bundle.
v0.7.0 28 Apr 2026
- Added Family Grid Card — animated grid of glowing avatar tiles.
- Rings breathe slowly for people at home, pulse faster for everyone away.
- Configurable 1–6 column grid; optional "X home · Y away" header.
v0.6.0 16 Apr 2026
- Added five card themes: glass, sci-fi, steampunk, terminal, neon.
- Zone colours from the Theme Card drive accent and glow colours inside each theme.
- Selectable per-card via the Display tab — no migration required.