@vcl/vcl/data-list/demo/example-browser-1.html

The whole VCL in one package

<div class="data-list col divider" style="max-width: 20em;">
  <ul class="data-list-body no-border">
    <li class="data-list-item row justify-between center">
      <div class="text"><b>Layer</b></div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Number</div>
      <div class="text align-right">23408</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Date Time</div>
      <div class="text align-right">27.07.2020 10:30:32</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Recoating Issue Probability</div>
      <div class="text align-right danger">1.0</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text"><b>Job</b></div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Layer Thickness</div>
      <div class="text align-right">0.02</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Layer Material</div>
      <div class="text align-right">HX_1</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Default Job File Name</div>
      <div class="text align-right">job.openjob_107052219_104421.task</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Dispenser Max Charge</div>
      <div class="text align-right">200.0</div>
    </li>
    <li class="data-list-item row justify-between center">
      <div class="text">Dispenser Min Charge</div>
      <div class="text align-right">100.0</div>
    </li>
  </ul>
</div>