Item

import {
  BuiItem, BuiItemMedia, BuiItemContent, BuiItemTitle, BuiItemDescription, BuiItemActions, BuiItemGroup,
} from 'ng-blatui';

<div buiItem variant="outline">
  <div buiItemMedia variant="icon"><svg><!-- bell --></svg></div>
  <div buiItemContent>
    <div buiItemTitle>Notifications</div>
    <p buiItemDescription>You have 3 unread messages.</p>
  </div>
  <div buiItemActions><button buiButton variant="outline" size="sm">View</button></div>
</div>

<div buiItem variant="default">…</div>
<div buiItem variant="outline">…</div>
<div buiItem variant="muted">…</div>

<div buiItemGroup class="divide-y rounded-lg border">
  <div buiItem>… member row …</div>
  <div buiItem>… member row …</div>
</div>

<div buiItem variant="outline">
  <div buiItemContent><div buiItemTitle>Push notifications</div></div>
  <div buiItemActions><button buiSwitch [checked]="true" aria-label="Push"></button></div>
</div>

<div buiItemGroup class="divide-y rounded-lg border">
  <a buiItem href="/account" class="hover:bg-accent">
    <div buiItemContent><div buiItemTitle>Account</div></div>
    <div buiItemActions><svg><!-- chevron --></svg></div>
  </a>
</div>