AS-cards-grid

by Plippie Plop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.0.1/remixicon.min.css">
<main>

<div class="crew-card-container">

  <div class="crew-card selected">
    <div class="crew-card-border">
      <i class="ri-toggle-line toggle"></i>
    </div>
    <div class="crew-card-content">
      <div class="crew-card-header">
        <span>AZGD2D2023</span><span class="crew-transport"><i class="ri-car-fill"></i></span>
        <p>Haarlem-Centraal</p>
      </div>
      <div class="cm-list">
        <div class="cm-list-item">
          <span class="cm-type"><i class="ri-vip-crown-line"></i></span>
          <span class="cm-name">Sjaak Zwart</span>
            <div class="cm-icons">
          <span class="cm-driver"><i class="ri-steering-2-line"></i></span>
          <span class="cm-device"><i class="ri-smartphone-line"></i></span>
          </div>
        </div>
        
         <div class="cm-list-item">
          <span class="cm-type"><i class="ri-graduation-cap-line"></i></span>
          <span class="cm-name">Sjaak Zwart</span>
            <div class="cm-icons">
          <span class="cm-driver"></span>
          <span class="cm-device"><i class="ri-smartphone-line"></i></span>
          </div>
        </div>
        
         <div class="cm-list-item">
          <span class="cm-type"><i class="ri-user-smile-line"></i></span>
          <span class="cm-name">Sjaak Zwart</span>
          <div class="cm-icons">
           <span class="cm-driver"></span>
           <span class="cm-ov"><b>ov</b></span>
          <span class="cm-device"><i class="ri-smartphone-line"></i></span>
          </div>
         
        </div>
        
      </div>
    </div>
  </div>
  
  
  <div class="crew-card ">
    <div class="crew-card-border">
      <i...

CSS

:root {
      --elevation-1dp:rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    --elevation-3dp:rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;    
    --elevation-6dp: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    --elevation-8dp: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
    --elevation-12dp: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
  --planner-color-black: #050505;
  --planner-color-gray-100: #FAFAFA;
  --planner-color-gray-200: #F1F1F1;
  --planner-color-gray-300: #5C5F62;
  --planner-color-gray-500: #1A1C1D;
  --planner-color-gray-700: #202223;
  --planner-color-green-100: #F1F8F5;
  --planner-color-green-300: #AEE9D1;
  --planner-color-green-700: #008060;
  --planner-color-red-100: #FFF4F4;
  --planner-color-red-300: #FFE9E8;
  --planner-color-red-500: #FF9D9D;
  --planner-color-red-700: #D72C0D;
  --planner-active-border: #449DA7;
  --crew-card-grid: repeat(auto-fill, minmax(15em, 1fr));

}


body {
  font-family: 'helvetica neue', 'open sans';
  font-size: 16px;
 
}


/* CREW CARDS */
.crew-card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
  padding: 0.5em;
  grid-template-columns: var(--crew-card-grid);
  color: var(--planner-color-black);
 
}

.crew-card {
  display: grid;
  grid-template-columns: 1em 1fr;
  border-radius: 0.5em;
  background-color: var(--planner-color-gray-100);
  overflow: hidden;
  border: 1px transparent solid;
  color: var(--planner-color-black);
  transition: all 0.3s ease-in-out; 
  cursor: pointer;
}


.crew-card .crew-card-border {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
 ...