Buy now
Contacts card
Contacts details like address, phone, email inside card. Can be mixed with image or map.
Around component
Basic example
-
Call us+1 (847) 252 765 33
-
Write usemail@example.com
-
Call us+1 (847) 252 765 33
-
Write usemail@example.com
<!-- Contacts card: Border -->
<div class="card">
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a href="#" class="d-block nav-link-style font-size-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a href="tel:+184725276533" class="d-block nav-link-style font-size-sm">+1 (847) 252 765 33</a>
</div>
</li>
<li class="media pt-2">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a href="mailto:email@example.com" class="d-block nav-link-style font-size-sm">email@example.com</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 box-shadow">
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a href="#" class="d-block nav-link-style font-size-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a href="tel:+184725276533" class="d-block nav-link-style font-size-sm">+1 (847) 252 765 33</a>
</div>
</li>
<li class="media pt-2">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a href="mailto:email@example.com" class="d-block nav-link-style font-size-sm">email@example.com</a>
</div>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
.card-body
ul.list-unstyled.mb-0
li.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+184725276533").d-block.nav-link-style.font-size-sm
| +1 (847) 252 765 33
li.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:email@example.com").d-block.nav-link-style.font-size-sm
| email@example.com
// Contacts card: Shadow
.card.border-0.box-shadow
.card-body
ul.list-unstyled.mb-0
li.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+184725276533").d-block.nav-link-style.font-size-sm
| +1 (847) 252 765 33
li.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:email@example.com").d-block.nav-link-style.font-size-sm
| email@example.com
Alternative layout
Phone numbers
- Customer service:+1 (080) 44 357 260
- Tech support:+1 00 33 169 7720
<!-- Contacts card: Border -->
<div class="card">
<div class="card-body text-center">
<i class="fe-map-pin h2 mt-2 mb-4 text-primary"></i>
<h3 class="h6 mb-2">Main store address</h3>
<p class="font-size-sm">396 Lillian Blvd, Holbrook, NY 11741, USA</p>
<a class="cs-fancy-link font-size-sm" href="#">
See on the map
</a>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 box-shadow">
<div class="card-body text-center">
<i class="fe-phone h2 mt-2 mb-4 text-primary"></i>
<h3 class="h6 mb-3">Phone numbers</h3>
<ul class="list-unstyled font-size-sm mb-0">
<li>
<span class="mr-1">Customer service:</span>
<a class="nav-link-style" href="tel:+108044357260">+1 (080) 44 357 260</a>
</li>
<li>
<span class="mr-1">Tech support:</span>
<a class="nav-link-style" href="tel:+100331697720">+1 00 33 169 7720</a>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
.card-body.text-center
i.fe-map-pin.h2.mt-2.mb-4.text-primary
h3.h6.mb-2 Main store address
p.font-size-sm 396 Lillian Blvd, Holbrook, NY 11741, USA
a(href="#").cs-fancy-link.font-size-sm
| See on the map
// Contacts card: Shadow
.card.border-0.box-shadow
.card-body.text-center
i.fe-phone.h2.mt-2.mb-4.text-primary
h3.h6.mb-3 Phone numbers
ul.list-unstyled.font-size-sm.mb-0
li
span.mr-1 Customer service:
a.nav-link-style(href="tel:+108044357260") +1 (080) 44 357 260
li
span.mr-1 Tech support:
a.nav-link-style(href="tel:+100331697720") +1 00 33 169 7720
With image
Chicago, USA
-
Call us+1 (847) 252 765 33
-
Write uschicago@example.com
New York, USA
-
Call us+1 (212) 477 690 000
-
Write usnewyork@example.com
<!-- Contacts card: Border -->
<div class="card">
<img src="path-to-image" class="card-img-top" alt="Chicago">
<div class="card-body">
<h5>Chicago, USA</h5>
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a href="#" class="d-block nav-link-style font-size-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a href="tel:+184725276533" class="d-block nav-link-style font-size-sm">+1 (847) 252 765 33</a>
</div>
</li>
<li class="media pt-2m">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a href="mailto:chicago@example.com" class="d-block nav-link-style font-size-sm">chicago@example.com</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 box-shadow">
<img src="path-to-image" class="card-img-top" alt="Chicago">
<div class="card-body">
<h5>New York, USA</h5>
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a href="#" class="d-block nav-link-style font-size-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a href="tel:+1212477690000" class="d-block nav-link-style font-size-sm">+1 (212) 477 690 000</a>
</div>
</li>
<li class="media pt-2m">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a href="newyork:email@example.com" class="d-block nav-link-style font-size-sm">newyork@example.com</a>
</div>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
+image("path-to-image", "Chicago").card-img-top
.card-body
h5 Chicago, USA
ul.list-unstyled.mb-0
li.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+184725276533").d-block.nav-link-style.font-size-sm
| +1 (847) 252 765 33
li.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:chicago@example.com").d-block.nav-link-style.font-size-sm
| chicago@example.com
// Contacts card: Shadow
.card.border-0.box-shadow
+image("path-to-image", "New York").card-img-top
.card-body
h5 New York, USA
ul.list-unstyled.mb-0
li.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 396 Lillian Blvd, Holbrook, NY 11741, USA
li.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+1212477690000").d-block.nav-link-style.font-size-sm
| +1 (212) 477 690 000
li.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:newyork@example.com").d-block.nav-link-style.font-size-sm
| newyork@example.com
With map
Chicago, USA
-
Call us+1 (847) 252 765 33
-
Write uschicago@example.com
New York, USA
-
Call us+1 (212) 477 690 000
-
Write usnewyork@example.com
<!-- Contacts card: Border -->
<div class="card">
<div class="card-img-top overflow-hidden">
<!-- Google map embed iframe goes here -->
</div>
<div class="card-body">
<h5>Chicago, USA</h5>
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a href="#" class="d-block nav-link-style font-size-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a href="tel:+184725276533" class="d-block nav-link-style font-size-sm">+1 (847) 252 765 33</a>
</div>
</li>
<li class="media pt-2m">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a href="mailto:chicago@example.com" class="d-block nav-link-style font-size-sm">chicago@example.com</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 box-shadow">
<div class="card-img-top overflow-hidden">
<!-- Google map embed iframe goes here -->
</div>
<div class="card-body">
<h5>New York, USA</h5>
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="fe-map-pin font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Find us</span>
<a href="#" class="d-block nav-link-style font-size-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="media pt-2 pb-3 border-bottom">
<i class="fe-phone font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Call us</span>
<a href="tel:+1212477690000" class="d-block nav-link-style font-size-sm">+1 (212) 477 690 000</a>
</div>
</li>
<li class="media pt-2m">
<i class="fe-mail font-size-lg mt-2 mb-0 text-primary"></i>
<div class="media-body pl-3">
<span class="font-size-ms text-muted">Write us</span>
<a href="newyork:email@example.com" class="d-block nav-link-style font-size-sm">newyork@example.com</a>
</div>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
.card-img-top.overflow-hidden
// Google map embed iframe goes here
.card-body
h5 Chicago, USA
ul.list-unstyled.mb-0
li.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+184725276533").d-block.nav-link-style.font-size-sm
| +1 (847) 252 765 33
li.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:chicago@example.com").d-block.nav-link-style.font-size-sm
| chicago@example.com
// Contacts card: Shadow
.card.border-0.box-shadow
.card-img-top.overflow-hidden
// Google map embed iframe goes here
.card-body
h5 New York, USA
ul.list-unstyled.mb-0
li.media.pb-3.border-bottom
i.fe-map-pin.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Find us
a(href="#").d-block.nav-link-style.font-size-sm
| 396 Lillian Blvd, Holbrook, NY 11741, USA
li.media.pt-2.pb-3.border-bottom
i.fe-phone.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Call us
a(href="tel:+1212477690000").d-block.nav-link-style.font-size-sm
| +1 (212) 477 690 000
li.media.pt-2
i.fe-mail.font-size-lg.mt-2.mb-0.text-primary
.media-body.pl-3
span.font-size-ms.text-muted Write us
a(href="mailto:newyork@example.com").d-block.nav-link-style.font-size-sm
| newyork@example.com