PERSON CARD: Horizontal tw-card for displaying people (siblings, parents, students)
VARIANTS: Default | Accent (.person-card-accent) | Compact (.person-card-sm) | With expand/collapse | With actions

Used in drawer panels and record pages to display family members, siblings, and connected people. Composes with avatar component and supports expand/collapse via collapsible_controller.js.

Default Person Card

Base: Avatar + name + role/relation + optional metadata line. Uses existing avatar component.

OC
Oscar Clarke (Son)
Year 7 · DOB: 15/03/2013
EJ
Emily Jones (Daughter)
Year 5 · DOB: 22/08/2015
<div class="tw-person-card"><div class="tw-person-card-header"><div class="tw-avatar tw-avatar-sm tw-avatar-primary">OC</div><div class="tw-person-card-info">...</div></div></div>

Accent Variant

Accent: Add .person-card-accent to show a left-border accent highlighting a linked/active person (e.g. a sibling with an existing enquiry).

HJ
Harry Jones (Sibling)
Year 9 · DOB: 05/05/2011
Has Enquiry
LJ
Lily Jones (Sibling)
Year 3 · DOB: 12/11/2017
<div class="tw-person-card tw-person-card-accent">...</div>

With Actions

Actions: Add buttons or badges in the .person-card-actions area on the right.

HJ
Harry Jones (Sibling)
Year 9 · DOB: 05/05/2011
<div class="tw-person-card-actions"><button class="tw-btn tw-btn-secondary tw-btn-sm">...</button></div>

With Expand/Collapse

Expandable: Uses collapsible_controller.js to reveal detail content. Add a chevron in the actions area and wrap detail content in .collapsible-content. Works with .info-grid pattern inside the detail section.

DOB
15/03/2013
Current School
Oakwood Primary
Entry Year
2026
Source
Open Day
DOB
22/08/2015
Current School
Willowbank Prep
Entry Year
2027
Source
Referral
<div class="tw-person-card" data-controller="collapsible"><button class="tw-person-card-header" data-action="click->collapsible#toggle">...</button><div class="tw-collapsible-content" data-collapsible-target="content">...</div></div>

Compact Variant (.person-card-sm)

Compact: Tighter spacing and smaller text for drawer panels. Add .person-card-sm alongside .person-card.

DOB
15/03/2013
School
Oakwood Primary
DOB
22/08/2015
School
Willowbank Prep
<div class="tw-person-card tw-person-card-sm">...</div>

Parent / Guardian Cards

Parents: No avatar. Name + role inline via <span>. Relationship badges in .person-card-body. Full-width action button in .person-card-footer.

Poppy Smith (Mother)
PRIMARY LIVES WITH CHILD
Hannah Jones (Mother)
LIVES WITH CHILD
<div class="tw-person-card"><div class="tw-person-card-header">...</div><div class="tw-person-card-body">badges...</div><div class="tw-person-card-footer">button...</div></div>

Sibling Cards

Siblings: Avatar + inline name/role in header. Date meta below name. Full-width action button in .person-card-footer.

EC
Emily Clarke (Sibling)
TH
Thomas Hughes (Sibling)
<div class="tw-person-card"><div class="tw-person-card-header"><div class="tw-avatar ...">...</div><div class="tw-person-card-info">...</div></div><div class="tw-person-card-footer">button...</div></div>

In Context (Sidebar Section)

Example: Typical usage inside a record sidebar showing family members with expand/collapse.

Family Members

Parents / Guardians

Poppy Smith (Mother)
PRIMARY LIVES WITH CHILD

Siblings

DOB
22/08/2015
Current School
Oakwood Primary
DOB
12/11/2017
Current School
Willowbank Prep

Empty State

Empty: When no family members are linked, show a helpful message with an optional action.

Family Members

No family members linked