Item

  <div style="width: min(100%, 24rem); display: grid; gap: .5rem;">
    <wc-item selected="true" id="item1">

      <div slot="container">
        <div style="background: var(--color-red-container); position: absolute; inset: 0;"></div>
        <wc-ripple for="item1"></wc-ripple>
      </div>

      <wc-icon slot="start" name="notifications"></wc-icon>
      <div slot="overline">Settings</div>
      <div slot="headline">Notifications</div>
      <div slot="supporting-text">Manage alerts and reminders</div>
      <div slot="trailing-supporting-text">Ctrl + O</div>
      <wc-icon slot="end" name="chevron_right"></wc-icon>
    </wc-item>

    <wc-divider></wc-divider>

    <wc-item>
      <wc-icon slot="start" name="person"></wc-icon>
      <div slot="overline">Account</div>
      <div slot="headline">Profile</div>
      <div slot="supporting-text" style="white-space: nowrap;">Update your name, photo, personal details and bank details</div>
      <wc-avatar slot="end" name="Shivaji Varma" style="--avatar-size: 2rem;"></wc-avatar>
    </wc-item>

    <wc-divider></wc-divider>

    <wc-item>
      <wc-icon slot="start" name="person"></wc-icon>
      <div slot="overline">Account</div>
      <div slot="headline">Profile</div>
      <div slot="supporting-text">Update your name, photo, personal details and bank details</div>
      <wc-avatar slot="end" name="Shivaji Varma" style="--avatar-size: 2rem;"></wc-avatar>
    </wc-item>
  </div>

  <wc-item style="width: min(100%, 32rem);">
    <wc-icon slot="start" name="notifications"></wc-icon>
    <div slot="headline">New build available</div>
    <div slot="supporting-text">Version 3.7.0 is ready to install</div>
    <div slot="trailing-supporting-text">2 min ago</div>
    <wc-button tooltip="sample tooltip" slot="end" size="sm" variant="filled">Update</wc-button>
  </wc-item>