<div class="card card-custom gutter-b bg-light-primary">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
            <div class="d-flex flex-column mr-5">
                <a href="#" class="h4 text-dark text-hover-primary mb-5">
                    Get In Touch
                </a>
                <p class="text-dark-50">
                    There are many variations of Lorem Ipsum available.
                </p>
            </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
    Contact Us
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-light-success">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
        Customer Support
    </a>
    <p class="text-dark-50">
     There are many variations of passages of Lorem Ipsum.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-success py-4 px-6">
    Make A Call
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-light-danger">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
        Online Chat
    </a>
    <p class="text-dark-50">
     There are many variations of passages of Lorem Ipsum available.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-danger py-4 px-6">
        Start Chat
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-primary">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
    Get In Touch
    </a>
    <p class="text-dark-50">
     There are many variations of Lorem Ipsum available.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
    Contact Us
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-diagonal">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
    Customer Support
    </a>
    <p class="text-dark-50">
     There are many variations of passages of Lorem Ipsum.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-light-success py-4 px-6">
    Make A Call
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-diagonal">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
    Online Chat
    </a>
    <p class="text-dark-50">
     There are many variations of passages of Lorem Ipsum available.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-light-warning py-4 px-6">
    Start Chat
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-primary">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
    Get In Touch
    </a>
    <p class="text-dark-50">
     There are many variations of Lorem Ipsum available.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-primary py-4 px-6">
    Contact Us
    </a>
   </div>
  </div>
 </div>
</div>

<div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-success">
 <div class="card-body">
  <div class="d-flex align-items-center justify-content-between p-4 flex-lg-wrap flex-xl-nowrap">
   <div class="d-flex flex-column mr-5">
    <a href="#" class="h4 text-dark text-hover-primary mb-5">
    Customer Support
    </a>
    <p class="text-dark-50">
     There are many variations of passages of Lorem Ipsum.
    </p>
   </div>
   <div class="ml-6 ml-lg-0 ml-xxl-6 flex-shrink-0">
    <a href="#" target="_blank" class="btn font-weight-bolder text-uppercase btn-success py-4 px-6">
    Make A Call
    </a>
   </div>
  </div>
 </div>
</div>