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:[email protected]">
          <i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
          [email protected]
        </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:[email protected]">
          <i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
          [email protected]
        </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:[email protected]">
          <i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
          [email protected]
        </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:[email protected]">
          <i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
          [email protected]
        </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:[email protected]">
          <i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
          [email protected]
        </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:[email protected]">
          <i class="ci-mail mt-1 me-2 pe-1 lead text-primary"></i>
          [email protected]
        </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>
Top