Buy now
Contacts card
Contacts details like address, phone, email inside card. Can be mixed with image or map.
Createx component
Basic example
<!-- Contacts card: border -->
<div class="card">
<div class="card-body">
<h3 class="h4">New York, USA</h3>
<ul class="mb-0 list-unstyled nav-dark">
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="tel:(405)555-0128">
<i class="ci-iphone mt-1 me-2 pe-1 lead text-primary"></i>
(405) 555-0128
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="mailto:hello@example.com">
<i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
hello@example.com
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-clock mt-1 me-2 pe-1 lead text-primary"></i>
Daily from 9 am to 9 pm
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-map-pin-outline mt-1 me-2 pe-1 lead text-primary"></i>
8502 Preston Rd. Inglewood, NY 98380
</a>
</li>
</ul>
</div>
</div>
<!-- Contacts card: shadow -->
<div class="card border-0 shadow">
<div class="card-body">
<h3 class="h4">New York, USA</h3>
<ul class="mb-0 list-unstyled nav-dark">
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="tel:(405)555-0128">
<i class="ci-iphone mt-1 me-2 pe-1 lead text-primary"></i>
(405) 555-0128
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="mailto:hello@example.com">
<i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
hello@example.com
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-clock mt-1 me-2 pe-1 lead text-primary"></i>
Daily from 9 am to 9 pm
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-map-pin-outline mt-1 me-2 pe-1 lead text-primary"></i>
8502 Preston Rd. Inglewood, NY 98380
</a>
</li>
</ul>
</div>
</div>With image
<!-- Contacts card: border -->
<div class="card">
<img class="card-img-top" src="path-to-image" alt="Card image">
<div class="card-body">
<h3 class="h4">New York, USA</h3>
<ul class="mb-0 list-unstyled nav-dark">
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="tel:(405)555-0128">
<i class="ci-iphone mt-1 me-2 pe-1 lead text-primary"></i>
(405) 555-0128
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="mailto:hello@example.com">
<i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
hello@example.com
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-clock mt-1 me-2 pe-1 lead text-primary"></i>
Daily from 9 am to 9 pm
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-map-pin-outline mt-1 me-2 pe-1 lead text-primary"></i>
8502 Preston Rd. Inglewood, NY 98380
</a>
</li>
</ul>
</div>
</div>
<!-- Contacts card: shadow -->
<div class="card border-0 shadow">
<img class="card-img-top" src="path-to-image" alt="Card image">
<div class="card-body">
<h3 class="h4">New York, USA</h3>
<ul class="mb-0 list-unstyled nav-dark">
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="tel:(405)555-0128">
<i class="ci-iphone mt-1 me-2 pe-1 lead text-primary"></i>
(405) 555-0128
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="mailto:hello@example.com">
<i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
hello@example.com
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-clock mt-1 me-2 pe-1 lead text-primary"></i>
Daily from 9 am to 9 pm
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-map-pin-outline mt-1 me-2 pe-1 lead text-primary"></i>
8502 Preston Rd. Inglewood, NY 98380
</a>
</li>
</ul>
</div>
</div>With map
<!-- Contacts card: border -->
<div class="card">
<div class="card-img-top overflow-hidden">
<iframe width="600" height="200" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d985265.6834686119!2d-73.53312098675273!3d41.40372595831977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2sua!4v1569318858921!5m2!1sen!2sua"></iframe>
</div>
<div class="card-body">
<h3 class="h4">New York, USA</h3>
<ul class="mb-0 list-unstyled nav-dark">
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="tel:(405)555-0128">
<i class="ci-iphone mt-1 me-2 pe-1 lead text-primary"></i>
(405) 555-0128
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="mailto:hello@example.com">
<i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
hello@example.com
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-clock mt-1 me-2 pe-1 lead text-primary"></i>
Daily from 9 am to 9 pm
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-map-pin-outline mt-1 me-2 pe-1 lead text-primary"></i>
8502 Preston Rd. Inglewood, NY 98380
</a>
</li>
</ul>
</div>
</div>
<!-- Contacts card: shadow -->
<div class="card border-0 shadow">
<div class="card-img-top overflow-hidden">
<iframe width="600" height="200" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d985265.6834686119!2d-73.53312098675273!3d41.40372595831977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2sua!4v1569318858921!5m2!1sen!2sua"></iframe>
</div>
<div class="card-body">
<h3 class="h4">New York, USA</h3>
<ul class="mb-0 list-unstyled nav-dark">
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="tel:(405)555-0128">
<i class="ci-iphone mt-1 me-2 pe-1 lead text-primary"></i>
(405) 555-0128
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="mailto:hello@example.com">
<i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
hello@example.com
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-clock mt-1 me-2 pe-1 lead text-primary"></i>
Daily from 9 am to 9 pm
</a>
</li>
<li class="mb-2 pb-1">
<a class="d-flex nav-link fw-normal p-0" href="#">
<i class="ci-map-pin-outline mt-1 me-2 pe-1 lead text-primary"></i>
8502 Preston Rd. Inglewood, NY 98380
</a>
</li>
</ul>
</div>
</div>