<div class="card card-custom mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
        Get Started
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
        Tutorials
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    User Guide
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-success svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    Get Started
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-danger svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    Tutorials
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-warning svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    User Guide
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave wave-animate-slow mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-warning svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    Get Started
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave wave-animate-slower mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-success svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    Tutorials
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave wave-animate-fast">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-primary svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    User Guide
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave wave-animate-slow wave-primary mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-success svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    Get Started
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom wave wave-animate wave-danger mb-8 mb-lg-0">
 <div class="card-body">
  <div class="d-flex align-items-center p-5">
   <div class="mr-6">
    <span class="svg-icon svg-icon-danger svg-icon-4x">
     <svg>
      ...
     </svg>
    </span>
   </div>
   <div class="d-flex flex-column">
    <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
    Tutorials
    </a>
    <div class="text-dark-75">
     ...
    </div>
   </div>
  </div>
 </div>
</div>