litmos card

by Maxim_Wolf

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="demo">
  <div class="lane">


    <article class="lane-card" tabindex=0>
      <header class="lane-card__header">
        <div class="lane-card__image" style="background:url(https://picsum.photos/184/92)"></div>
        <progress class="lane-card__progress" max="100" value="80">80%</progress>
        <h1 class="lane-card__caption">Compliance Essentials for new Employees</h1>
      </header>
      <svg class="lane-card__badge" xmlns="http://www.w3.org/2000/svg">
        <use href="#badge-indicator" />
      </svg>
      <p class="lane-card__content lane-card__type">course</p>
      <p class="lane-card__content lane-card__percent">80%</p>
      <footer class="lane-card__footer ">
        <ul class="property-grid lane-card__footer-list">
          <li>
            <span class="property-grid__term">compliance</span>
            <span class="property-grid__value">Retake Now</span>
          </li>
          <li>
            <span class="property-grid__term">Due:</span>
            <span class="property-grid__value"><time datetime="2023-08-23">8-29-23</time></span>
          </li>
          <li>
            <span class="property-grid__term">Started:</span>
            <span><time datetime="2023-08-20">8-29-23</time></span>
          </li>
        </ul>
<svg class="lane-card__footer-shevron" xmlns="http://www.w3.org/2000/svg">
  <use href="#shevron" />
</svg>
      </footer>
    </article>
  </div>
</div>
<div style="display:none;">
<svg id="badge-indicator" xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28" fill="none">
  <circle cx="13.7449" cy="11.3143" r="6.20093" fill="white" />
  <path d="M12.8718 15.049L12.8718 15.049L12.8758 15.046L13.7601 14.3605L14.6331 15.0351L14.6331 15.0352L14.6366 15.0378C15.4828 15.6802 16.5562 14.8327 16.2784 13.8807L16.2785 13.8807L16.277 13.876L15.9116 12.6681L16.9687 11.8138C17.7608 11.1952...

CSS

:root {
  --litmos-lane-card: rgba(255, 250, 240, 1);
  --litmos-border-color: rgba(0, 0, 0, 0.3);
  --litmos-lane-card-radius: 1em;
  --limtos-lane-card-min-width: 11.5em;
  --litmos-accent4: #761EF3;
  --litmos-lane-card-font: 1em;
  --litmos-caption-size: 1.1;
  --litmos-type-size: 0.7857;
  --litmos-footer-size: 0.7142;
}

.demo {
  display: grid;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-items: center;
}

.lane {
  max-height: 14.5rem;
  background-color: #BBBBBB;
  width: 100%;
}

html {
  font-family: sans-serif;

}

body {
  background-color: rgba(255, 255, 255, 1);
}


.lane-card {
  background-color: var(--litmos-lane-card);
  border-radius: var(--litmos-lane-card-radius);
  width: var(--limtos-lane-card-min-width);
  border-style: solid;
  border-width: 1px;
  border-color: var(--litmos-border-color);
  display: grid;
  grid-template-columns: auto auto;
  cursor: pointer;
  margin: 0.5em;
}

.lane-card:hover {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.50);
}

.lane-button {

  background-color: var(--litmos-lane-card);
  border-radius: var(--litmos-lane-card-radius);
  /*width: var(--limtos-lane-card-min-width);*/
  border-style: none;
  border-width: 1px;
  border-color: var(--litmos-border-color);
  display: grid;
  grid-template-columns: auto auto;
  margin: 0;
  padding: 0;
  text-align: unset;
  cursor: pointer;
}

.lane-card__image {
  border-top-left-radius: var(--litmos-lane-card-radius);
  border-top-right-radius: var(--litmos-lane-card-radius);
  width: 100%;
  height: 82px;
  margin: 0;
  padding: 0;
}

.lane-card__progress {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  display: block;
}

.lane-card__progress::-webkit-progress-bar {
  background-color: transparent;

}

.lane-card__progress::-webkit-progress-value {
  background-color: var(--litmos-accent4);
  height: 4px;

}

.lane-card__caption {
  font-size: calc(var(--litmos-lane-card-font)*var(--litmos-caption-size));
  padding: 0...