@vcl/vcl/data-list/demo/example-basic.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<div class="data-list item-selectability item-hover-highlight">
  <header class="data-list-header">
    <h2>My Profile</h2>
  </header>
  <ul class="data-list-body" role="listbox" aria-mdivtiselectable="false">
    <li class="data-list-item row justify-between center flex-no-wrap" role="option" aria-selected="false">
      <div class="span-gcb m-2" role="gridcell">Name</div>
      <div class="span-gca m-2" role="gridcell">Max Musermann</div>
      <button style="min-width: 3em;" class="button transparent" type="button">
        <div class="icogram">
          <div class="icon fas fa-edit" aria-hidden="true" role="img"></div>
        </div>
      </button>
    </li>
    <li class="data-list-item row justify-between center flex-no-wrap selected" role="option" aria-selected="true">
      <div class="span-gcb m-2" role="gridcell">Username (selected item)</div>
      <div class="span-gca m-2" role="gridcell">Maxman</div>
      <div style="min-width: 3em;"></div>
    </li>
    <li class="data-list-item row justify-between center flex-no-wrap disabled" role="option" aria-selected="false">
      <div class="span-gcb m-2" role="gridcell">E-Mail (disabled item)</div>
      <div class="span-gca m-2" role="gridcell">musermann.max@example.com</div>
      <div style="min-width: 3em;"></div>
    </li>
    <li class="data-list-item row justify-between center flex-no-wrap" role="option" aria-selected="false">
      <div class="span-gcb m-2" role="gridcell">Password</div>
      <div class="span-gca m-2" role="gridcell">********</div>
      <div style="min-width: 3em;"></div>
    </li>
    <li class="data-list-item row justify-between center flex-no-wrap" role="option" aria-selected="false">
      <div class="span-gcb m-2" role="gridcell">Country</div>
      <div class="span-gca m-2" role="gridcell">Germany</div>
      <div style="min-width: 3em;"></div>
    </li>
  </ul>
  <footer class="data-list-footer row justify-end my-2">
    <button class="button" type="button">
      <div class="icogram">
        <div class="icon fas fa-plus" aria-hidden="true" role="img"></div>
        <div class="text">Add Setting</div>
      </div>
    </button>
  </footer>
</div>