{# Stack items in <div class="ui-item-group"> for shared dividers and one border. #}
<div style="display:grid;gap:16px;max-width:520px">
<.item title="Two-factor authentication" description="Verify via email or phone number." variant="outline">
<:actions><.button variant="outline" size="sm" type="button">Enable</.button></:actions>
</.item>
<.item title="Billing" description="Invoices and payment methods." variant="muted" href="#" media_variant="icon">
<:media><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg></:media>
</.item>
<div class="ui-item-group">
<.item title="Ada Lovelace" description="ada@example.com" size="sm">
<:media><span class="ui-avatar"><span class="ui-avatar-fallback">AL</span></span></:media>
<:actions><.badge variant="secondary">Owner</.badge></:actions>
</.item>
<.item title="Grace Hopper" description="grace@example.com" size="sm">
<:media><span class="ui-avatar"><span class="ui-avatar-fallback">GH</span></span></:media>
<:actions><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Options for Grace Hopper"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></:actions>
</.item>
</div>
</div>