Card Selector

HTML

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<div class="_card">
  <i class="material-icons _red">local_fire_department</i>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="_card">
  <i class="material-icons _green">compost</i>
  <p>
    Sed sapien turpis, consectetur egestas est ac, dapibus scelerisque ante.
  </p>
</div>
<div class="_card">
  <i class="material-icons _blue">tsunami</i>
  <p>Nam vel posuere eros. In at porta tellus. Nam mattis egestas luctus.</p>
</div>

CSS

._red {
  background: linear-gradient(#fab253, #fa8e00);
}
._green {
  background: linear-gradient(#94e5a3, #10e036);
}
._blue {
  background: linear-gradient(#9ad7eb, #10ace0);
}
._card{
  position: relative;
  display: flex;
  flex: row;
  align-items: center;
  width: fit-content;
  margin-bottom: 4px;
  padding: 4px;
  border: 2px solid rgb(197, 217, 223);
  border-radius: 3px;
  padding-left: 10px;

  i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
  }
  p {
    margin: 6px;
    max-width: 300px;
  }
}

._card::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -2px;
  width: 0px;
  height: calc(2px + 100%);
  background-color: blue;
  transition: width 0.2s linear;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
._selectedCard::before{
  width: 6px;
}

JavaScript

var selectedCardClassName = "_selectedCard";
var currentIndex = -1;
// Clear the selected card class from any cards that have it
function ClearSelections() {
  var cards = document.getElementsByClassName(selectedCardClassName);
  for (var card of cards) {
    card.classList.remove(selectedCardClassName);
  }
}
// Set the selected card class on the card at the given index
function SetSelectedCard(index) {
  var card = document.getElementsByClassName("_card")[index];
  card.classList.add(selectedCardClassName);
}
// Increment the currently selected card and update card classes
function UpdateIndex() {
  currentIndex = (currentIndex + 1) % 3;
  ClearSelections();
  SetSelectedCard(currentIndex);
}
// Update the index every second for display purposes
setInterval(UpdateIndex, 1000);

// Initialize selection
UpdateIndex();