Callout
Metronic's Callout examples include icons, text and action buttons with a background color effect.
Get In Touch
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
<div class="card card-custom gutter-b">
<div class="card-body">
<div class="d-flex align-items-center p-5">
<div class="mr-6">
<span class="svg-icon svg-icon-2x">
<svg>
...
</svg>
</span>
</div>
<div class="d-flex flex-column">
<a href="#" class="h4 text-dark text-hover-primary mb-5">
Get Started
</a>
<p class="text-dark-50">
...
</p>
</div>
</div>
</div>
</div>
Customer Support
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
<div class="card card-custom gutter-b">
<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">
...
</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>
Get In Touch
There are many variations of Lorem Ipsum available.
<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>
Customer Support
There are many variations of Lorem Ipsum available.
<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>
Online Chat
There are many variations of Lorem Ipsum available.
<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>
Get In Touch
There are many variations of Lorem Ipsum available.
<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>
Customer Support
There are many variations of Lorem Ipsum available.
<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>
Online Chat
There are many variations of Lorem Ipsum available.
<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>
Get In Touch
There are many variations of Lorem Ipsum available.
<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>
Customer Support
There are many variations of Lorem Ipsum available.
<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>
Online Chat
There are many variations of Lorem Ipsum available.
<div class="card card-custom gutter-b bg-diagonal bg-diagonal-light-warning">
<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-warning py-4 px-6">
Start Chat
</a>
</div>
</div>
</div>
</div>
