<div style="display:grid;gap:24px">
<.record_identity name="Ada Lovelace" initials="AL" size="lg" meta={vec!["Customer #20391".into(), "Northwind Ltd".into(), "Billing admin".into(), "Joined 12 Mar 2024".into()]}>
<:flags><span class="ui-badge" data-variant="warning"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>Payment overdue</span><.badge variant="outline">Enterprise plan</.badge><.badge variant="outline">Prefers email</.badge></:flags>
</.record_identity>
<div style="display:grid;gap:12px;max-width:520px">
<.record_identity name="Grace Hopper" initials="GH" href="#" meta={vec!["#20412".into(), "Contoso".into()]}>
<:aside><span class="ui-badge" data-variant="outline" style="margin-left:auto">VIP</span></:aside>
</.record_identity>
<.record_identity name="Katherine Johnson" initials="KJ" href="#" masked meta={vec!["#20457".into()]} />
</div>
</div>