List

  <wc-list style="width: min(100%, 28rem);">
    <wc-list-item selected="true">
      <wc-icon slot="leading" name="inbox"></wc-icon>
      Inbox
      <span slot="trailing-supporting-text">24</span>
    </wc-list-item>
    <wc-list-item>
      <wc-avatar slot="leading" name="Shivaji Varma"></wc-avatar>
      Shivaji Varma
      <span slot="supporting-text">Software Engineer</span>
      <span slot="trailing-supporting-text">7</span>
    </wc-list-item>
    <wc-list-item>
      <wc-icon slot="leading" name="send"></wc-icon>
      Sent
      <wc-icon slot="trailing" name="chevron_right"></wc-icon>
    </wc-list-item>

    <wc-divider></wc-divider>

    <h2 class="text-title" style="padding-inline: var(--item-padding-inline, 1rem)">
      Section title
    </h2>

    <wc-list-item disabled="true">
      <wc-icon slot="leading" name="delete"></wc-icon>
      Trash (Disabled)
    </wc-list-item>
  </wc-list>

  <wc-list style="width: min(100%, 28rem);">
    <wc-list-item actionable="true">
      <wc-icon slot="leading" name="person"></wc-icon>
      Profile settings
      <wc-icon slot="trailing" name="chevron_right"></wc-icon>
    </wc-list-item>
    <wc-list-item href="//shivajivarma.com" target="_blank">
      <wc-avatar slot="leading" name="Shivaji Varma"></wc-avatar>
      Shivaji Varma
      <span slot="supporting-text">Software Engineer</span>
      <span slot="trailing-supporting-text">7</span>
    </wc-list-item>
  </wc-list>