Contacts Section - All Examples

Discover 9 Contacts Section examples available in Loopple

Section Contact Simple

Component from Asteria Dashboard Builder
<div class="row removable">
    <div class="col-lg-4 mb-4 text-center">
        <div class="card draggable" draggable="true">
            <div class="card-body">
                <i class="fa fa-map-marker-alt text-lg mb-3"></i>
                <p class="mb-0 text-sm">Street no. 2, Center Avenue</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 mb-4 text-center">
        <div class="card draggable" draggable="true">
            <div class="card-body">
                <i class="fa fa-phone text-lg mb-3"></i>
                <p class="mb-0 text-sm">+ 123 456 789 000</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 mb-4 text-center">
        <div class="card draggable" draggable="true">
            <div class="card-body">
                <i class="fa fa-envelope text-lg mb-3"></i>
                <p class="mb-0 text-sm">[email protected]</p>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card mb-4 draggable" draggable="true">
            <div class="card-body">
                <div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-control-label" for="input-username">Your Name</label>
                                <input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label" for="input-username">Mail</label>
                                <input type="email" id="input-username" class="form-control" placeholder="Username" value="[email protected]">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label" for="input-username">Phone</label>
                                <input type="number" id="input-username" class="form-control" placeholder="+54 ..." value="lucky.jesse">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-control-label">About Me</label>
                                <textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
                                </div>
                        </div>
                        <div class="col-12 text-center mt-3">
                            <button class="btn btn-lg bg-gradient-primary mb-0">Send Message</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Section Contact Simple Horizontal

Component from Asteria Dashboard Builder

Section Contact Simple

Component from Argon Dashboard Builder

Section Contact Image

Component from Argon Dashboard Builder

Section Contact Simple

Component from Soft UI Dashboard Builder

Section Contact Horizontal

Component from Soft UI Dashboard Builder

Section Contact Image

Component from Soft UI Dashboard Builder

Section Contact Horizontal

Component from Argon Dashboard Builder

Section Contact Simple Color

Component from Asteria Dashboard Builder