Contact Box

Contact box modules which can be set in different styles

Contact Info

Address

1355 3rd Street San Francisco
CA 94124 United States

Phone

+1 732 418 2837
+1 415 584 5290

Email
contact@yourdomain.com info@yourdomain.com
Website
www.yourdomain.com

Contact Info

Address

1355 3rd Street San Francisco
CA 94124 United States

Phone

+1 732 418 2837

Email
contact@yourdomain.com

Open Hours

Duis pretium purus eget cursus molestie nunc pulvinar magna quis malesuada erat sapien nullam mi ornare dictum.

Monday - Friday
9.00 AM - 5.00 PM
Saturday
9.00 AM - 3.00 PM
Sunday
9.00 AM - 12.00 PM
<div class="contact-box h-100 px-4 py-5 text-white-75 rounded-xl shadow-lg bg-image" data-img-src="../../assets/images/upload/contact-box-bg-01.jpg">
    <div class="py-2 px-xl-3">

        <h4 class="section-title-3 title-light-1 text-left font-weight-700 mb-4">Contact Info</h4>

        <div class="row contact-info-list pt-3">

            <div class="col-12 contact-info-item">
                <div class="icon-info-1">
                    <div class="icon-element text-white pt-1">
                        <i class="fas fa-map-marker-alt fa-2x"></i>
                    </div>
                    <div class="icon-info-text pl-2">
                        <h6 class="mb-1 font-weight-700 text-white">Address</h6>
                        <p class="mb-0">1355 3rd Street San Francisco<br>CA 94124 United States</p>
                    </div>
                </div>
            </div>

            <div class="col-12 contact-info-item">
                <div class="icon-info-1">
                    <div class="icon-element text-white pt-1">
                        <i class="fas fa-mobile-alt fa-2x"></i>
                    </div>
                    <div class="icon-info-text pl-2">
                        <h6 class="mb-1 font-weight-700 text-white">Phone</h6>
                        <p class="mb-0">+1 732 418 2837<br>+1 415 584 5290</p>
                    </div>
                </div>
            </div>

            <div class="col-12 contact-info-item">
                <div class="icon-info-1">
                    <div class="icon-element text-white pt-1">
                        <i class="fas fa-paper-plane fa-2x"></i>
                    </div>
                    <div class="icon-info-text pl-2">
                        <h6 class="mb-1 font-weight-700 text-white">Email</h6>
                        <a href="mailto:contact@yourdomain.com" class="text-white-75">contact@yourdomain.com</a>
                        <a href="mailto:info@yourdomain.com" class="text-white-75">info@yourdomain.com</a>
                    </div>
                </div>
            </div>

            <div class="col-12 contact-info-item">
                <div class="icon-info-1">
                    <div class="icon-element text-white pt-1">
                        <i class="fas fa-globe fa-2x"></i>
                    </div>
                    <div class="icon-info-text pl-2">
                        <h6 class="mb-1 font-weight-700 text-white">Website</h6>
                        <a href="#" class="text-white-75">www.yourdomain.com</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<div class="contact-box h-100 px-4 py-5 text-white-75 text-center rounded-xl shadow-lg bg-image" data-img-src="../../assets/images/upload/contact-box-bg-02.jpg">
    <div class="py-2 px-xl-3">

        <h4 class="section-title-3 title-light-1 text-center font-weight-700 mb-4">Contact Info</h4>

        <div class="contact-info-list pt-3">

            <div class="col-12 contact-info-item pb-2 mb-4">
                <div class="icon-info-4 text-center">
                    <div class="icon-element mb-3 text-white">
                        <i class="fas fa-map-marker-alt fa-2x"></i>
                    </div>
                    <div class="icon-info-text pt-1">
                        <h6 class="mb-1 font-weight-700 text-white">Address</h6>
                        <p class="mb-0">1355 3rd Street San Francisco<br>CA 94124 United States</p>
                    </div>
                </div>
            </div>

            <div class="col-12 contact-info-item pb-2 mb-4">
                <div class="icon-info-4 text-center">
                    <div class="icon-element mb-3 text-white">
                        <i class="fas fa-mobile-alt fa-2x"></i>
                    </div>
                    <div class="icon-info-text pt-1">
                        <h6 class="mb-1 font-weight-700 text-white">Phone</h6>
                        <p class="mb-0">+1 732 418 2837</p>
                    </div>
                </div>
            </div>

            <div class="col-12 contact-info-item">
                <div class="icon-info-4 text-center">
                    <div class="icon-element mb-3 text-white">
                        <i class="fas fa-paper-plane fa-2x"></i>
                    </div>
                    <div class="icon-info-text pt-1">
                        <h6 class="mb-1 font-weight-700 text-white">Email</h6>
                        <a href="mailto:contact@yourdomain.com" class="text-white-75">contact@yourdomain.com</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<div class="contact-box h-100 px-4 py-5 text-white-75 text-center rounded-xl shadow-lg bg-image" data-img-src="../../assets/images/upload/contact-box-bg-03.jpg">
    <div class="py-2 px-xl-3">

        <h4 class="section-title-3 title-light-1 text-center font-weight-700 mb-4">Open Hours</h4>

        <div class="pt-3 pb-4">
            <p>Duis pretium purus eget cursus molestie nunc pulvinar magna quis malesuada erat sapien nullam mi ornare dictum.</p>
        </div>

        <div class="pb-2 mb-4">
            <span class="badge badge-pill badge-primary mb-2">Monday - Friday</span>
            <div class="text-white font-italic">9.00 AM - 5.00 PM</div>
        </div>

        <div class="pb-2 mb-4">
            <span class="badge badge-pill badge-primary mb-2">Saturday</span>
            <div class="text-white font-italic">9.00 AM - 3.00 PM</div>
        </div>

        <div>
            <span class="badge badge-pill badge-primary mb-2">Sunday</span>
            <div class="text-white font-italic">9.00 AM - 12.00 PM</div>
        </div>

    </div>
</div>

Quickly Build Your Impressive Website

Bootstrap 4 multipurpose template with a lots of unique modules and useful features.