Cartzilla Buy now

Contacts card

Contacts details like address, phone, email inside card. Can be mixed with image or map.

Cartzilla component

Basic example

<!-- Contacts card: Border -->
<div class="card">
  <div class="card-body">
    <ul class="list-unstyled mb-0">
      <li class="d-flex pb-3 border-bottom">
        <i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Find us</span>
          <a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
        </div>
      </li>
      <li class="d-flex pt-2 pb-3 border-bottom">
        <i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Call us</span>
          <a href="tel:+184725276533" class="d-block text-heading fs-sm">+1 (847) 252 765 33</a>
        </div>
      </li>
      <li class="d-flex pt-2m">
        <i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Write us</span>
          <a href="mailto:email@example.com" class="d-block text-heading fs-sm">email@example.com</a>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
  <div class="card-body">
    <ul class="list-unstyled mb-0">
      <li class="d-flex pb-3 border-bottom">
        <i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Find us</span>
          <a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
        </div>
      </li>
      <li class="d-flex pt-2 pb-3 border-bottom">
        <i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Call us</span>
          <a href="tel:+184725276533" class="d-block text-heading fs-sm">+1 (847) 252 765 33</a>
        </div>
      </li>
      <li class="d-flex pt-2m">
        <i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Write us</span>
          <a href="mailto:email@example.com" class="d-block text-heading fs-sm">email@example.com</a>
        </div>
      </li>
    </ul>
  </div>
</div>
// Contacts card: Border
.card
  .card-body
    ul.list-unstyled.mb-0
      li.d-flex.pb-3.border-bottom
        i.ci-location.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Find us
          a(href="#").d-block.text-heading.fs-sm
            | 769, Industrial Dr, West Chicago, IL 60185, USA
      li.d-flex.pt-2.pb-3.border-bottom
        i.ci-phone.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Call us
          a(href="tel:+184725276533").d-block.text-heading.fs-sm
            | +1 (847) 252 765 33
      li.d-flex.pt-2
        i.ci-mail.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Write us
          a(href="mailto:email@example.com").d-block.text-heading.fs-sm
            | email@example.com

// Contacts card: Shadow
.card.border-0.shadow
  .card-body
    ul.list-unstyled.mb-0
      li.d-flex.pb-3.border-bottom
        i.ci-location.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Find us
          a(href="#").d-block.text-heading.fs-sm
            | 769, Industrial Dr, West Chicago, IL 60185, USA
      li.d-flex.pt-2.pb-3.border-bottom
        i.ci-phone.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Call us
          a(href="tel:+184725276533").d-block.text-heading.fs-sm
            | +1 (847) 252 765 33
      li.d-flex.pt-2
        i.ci-mail.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Write us
          a(href="mailto:email@example.com").d-block.text-heading.fs-sm
            | email@example.com

Alternative layout

Main store address

396 Lillian Blvd, Holbrook, NY 11741, USA

Click to see map

Phone numbers

<!-- Contacts card: Border -->
<div class="card">
  <div class="card-body text-center">
    <i class="ci-location h3 mt-2 mb-4 text-primary"></i>
    <h3 class="h6 mb-2">Main store address</h3>
    <p class="fs-sm text-muted">396 Lillian Blvd, Holbrook, NY 11741, USA</p>
    <a class="fs-sm" href="#">
      Click to see map
      <i class="ci-arrow-right align-middle ms-1"></i>
    </a>
  </div>
</div>

<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
  <div class="card-body text-center">
    <i class="ci-phone h3 mt-2 mb-4 text-primary"></i>
    <h3 class="h6 mb-3">Phone numbers</h3>
    <ul class="list-unstyled fs-sm mb-0">
      <li>
        <span class="text-muted me-1">Customer service:</span>
        <a class="nav-link-style" href="tel:+108044357260">+1 (080) 44 357 260</a>
      </li>
      <li>
        <span class="text-muted me-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.ci-location.h3.mt-2.mb-4.text-primary
    h3.h6.mb-2 Main store address
    p.fs-sm.text-muted 396 Lillian Blvd, Holbrook, NY 11741, USA
    a(href="#").fs-sm
      | Click to see map
      i.ci-arrow-right.align-middle.ms-1

// Contacts card: Shadow
.card.border-0.shadow
  .card-body.text-center
    i.ci-phone.h3.mt-2.mb-4.text-primary
    h3.h6.mb-3 Phone numbers
    ul.list-unstyled.fs-sm.mb-0
      li
        span.text-muted.me-1 Customer service:
        a.nav-link-style(href="tel:+108044357260") +1 (080) 44 357 260
      li
        span.text-muted.me-1 Tech support:
        a.nav-link-style(href="tel:+100331697720") +1 00 33 169 7720

With image

<!-- Contacts card: Border -->
<div class="card">
  <img src="path-to-image" class="card-img-top" alt="Chicago">
  <div class="card-body">
    <h6>Chicago, USA</h6>
    <ul class="list-unstyled mb-0">
      <li class="media pb-3 border-bottom">
        <i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Find us</span>
          <a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
        </div>
      </li>
      <li class="d-flex pt-2 pb-3 border-bottom">
        <i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Call us</span>
          <a href="tel:+184725276533" class="d-block text-heading fs-sm">+1 (847) 252 765 33</a>
        </div>
      </li>
      <li class="d-flex pt-2m">
        <i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Write us</span>
          <a href="mailto:chicago@example.com" class="d-block text-heading fs-sm">chicago@example.com</a>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
  <img src="path-to-image" class="card-img-top" alt="Chicago">
  <div class="card-body">
    <h6>New York, USA</h6>
    <ul class="list-unstyled mb-0">
      <li class="d-flex pb-3 border-bottom">
        <i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Find us</span>
          <a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
        </div>
      </li>
      <li class="d-flex pt-2 pb-3 border-bottom">
        <i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Call us</span>
          <a href="tel:+1212477690000" class="d-block text-heading fs-sm">+1 (212) 477 690 000</a>
        </div>
      </li>
      <li class="d-flex pt-2m">
        <i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Write us</span>
          <a href="newyork:email@example.com" class="d-block text-heading fs-sm">newyork@example.com</a>
        </div>
      </li>
    </ul>
  </div>
</div>
// Contacts card: Border
.card
  img(src="path-to-image", alt="Chicago").card-img-top
  .card-body
    h6 Chicago, USA
    ul.list-unstyled.mb-0
      li.d-flex.pb-3.border-bottom
        i.ci-location.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Find us
          a(href="#").d-block.text-heading.fs-sm
            | 769, Industrial Dr, West Chicago, IL 60185, USA
      li.d-flex.pt-2.pb-3.border-bottom
        i.ci-phone.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Call us
          a(href="tel:+184725276533").d-block.text-heading.fs-sm
            | +1 (847) 252 765 33
      li.d-flex.pt-2
        i.ci-mail.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Write us
          a(href="mailto:chicago@example.com").d-block.text-heading.fs-sm
            | chicago@example.com

// Contacts card: Shadow
.card.border-0.shadow
  img(src="path-to-image", alt="New York").card-img-top
  .card-body
    h6 New York, USA
    ul.list-unstyled.mb-0
      li.d-flex.pb-3.border-bottom
        i.ci-location.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Find us
          a(href="#").d-block.text-heading.fs-sm
            | 396 Lillian Blvd, Holbrook, NY 11741, USA
      li.d-flex.pt-2.pb-3.border-bottom
        i.ci-phone.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Call us
          a(href="tel:+1212477690000").d-block.text-heading.fs-sm
            | +1 (212) 477 690 000
      li.d-flex.pt-2
        i.ci-mail.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Write us
          a(href="mailto:newyork@example.com").d-block.text-heading.fs-sm
            | newyork@example.com

With map

<!-- Contacts card: Border -->
<div class="card">
  <div class="card-img-top overflow-hidden">
    <!-- Google map embed iframe goes here -->
  </div>
  <div class="card-body">
    <h6>Chicago, USA</h6>
    <ul class="list-unstyled mb-0">
      <li class="d-flex pb-3 border-bottom">
        <i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Find us</span>
          <a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
        </div>
      </li>
      <li class="d-flex pt-2 pb-3 border-bottom">
        <i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Call us</span>
          <a href="tel:+184725276533" class="d-block text-heading fs-sm">+1 (847) 252 765 33</a>
        </div>
      </li>
      <li class="d-flex pt-2m">
        <i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Write us</span>
          <a href="mailto:chicago@example.com" class="d-block text-heading fs-sm">chicago@example.com</a>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
  <div class="card-img-top overflow-hidden">
    <!-- Google map embed iframe goes here -->
  </div>
  <div class="card-body">
    <h6>New York, USA</h6>
    <ul class="list-unstyled mb-0">
      <li class="d-flex pb-3 border-bottom">
        <i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Find us</span>
          <a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
        </div>
      </li>
      <li class="d-flex pt-2 pb-3 border-bottom">
        <i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Call us</span>
          <a href="tel:+1212477690000" class="d-block text-heading fs-sm">+1 (212) 477 690 000</a>
        </div>
      </li>
      <li class="d-flex pt-2m">
        <i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
        <div class="ps-3">
          <span class="fs-ms text-muted">Write us</span>
          <a href="newyork:email@example.com" class="d-block text-heading fs-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
    h6 Chicago, USA
    ul.list-unstyled.mb-0
      li.d-flex.pb-3.border-bottom
        i.ci-location.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Find us
          a(href="#").d-block.text-heading.fs-sm
            | 769, Industrial Dr, West Chicago, IL 60185, USA
      li.d-flex.pt-2.pb-3.border-bottom
        i.ci-phone.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Call us
          a(href="tel:+184725276533").d-block.text-heading.fs-sm
            | +1 (847) 252 765 33
      li.d-flex.pt-2
        i.ci-mail.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Write us
          a(href="mailto:chicago@example.com").d-block.text-heading.fs-sm
            | chicago@example.com

// Contacts card: Shadow
.card.border-0.shadow
  .card-img-top.overflow-hidden
    // Google map embed iframe goes here
  .card-body
    h6 New York, USA
    ul.list-unstyled.mb-0
      li.d-flex.pb-3.border-bottom
        i.ci-location.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Find us
          a(href="#").d-block.text-heading.fs-sm
            | 396 Lillian Blvd, Holbrook, NY 11741, USA
      li.d-flex.pt-2.pb-3.border-bottom
        i.ci-phone.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Call us
          a(href="tel:+1212477690000").d-block.text-heading.fs-sm
            | +1 (212) 477 690 000
      li.d-flex.pt-2
        i.ci-mail.fs-lg.mt-2.mb-0.text-primary
        .ps-3
          span.fs-ms.text-muted Write us
          a(href="mailto:newyork@example.com").d-block.text-heading.fs-sm
            | newyork@example.com
Top