Argon Dashboard Components

Discover 3 components available in Argon Dashboard

Section Profile

Component from Argon Dashboard Builder
<div class="row removable">
<div class="col-xl-4 order-xl-2 drop-zone">
    <div class="card card-profile draggable">
    <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
    <div class="row justify-content-center">
        <div class="col-lg-3 order-lg-2">
        <div class="card-profile-image">
            <a href="#">
            <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
            </a>
        </div>
        </div>
    </div>
    <div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
        <div class="d-flex justify-content-between">
        <a href="#" class="btn btn-sm btn-info  mr-4 ">Connect</a>
        <a href="#" class="btn btn-sm btn-default float-right">Message</a>
        </div>
    </div>
    <div class="card-body pt-0">
        <div class="row">
        <div class="col">
            <div class="card-profile-stats d-flex justify-content-center">
            <div>
                <span class="heading">22</span>
                <span class="description">Friends</span>
            </div>
            <div>
                <span class="heading">10</span>
                <span class="description">Photos</span>
            </div>
            <div>
                <span class="heading">89</span>
                <span class="description">Comments</span>
            </div>
            </div>
        </div>
        </div>
        <div class="text-center">
        <h5 class="h3">
            Jessica Jones<span class="font-weight-light">, 27</span>
        </h5>
        <div class="h5 font-weight-300">
            <i class="ni location_pin mr-2"></i>Bucharest, Romania
        </div>
        <div class="h5 mt-4">
            <i class="ni business_briefcase-24 mr-2"></i>Solution Manager - Creative Tim Officer
        </div>
        <div>
            <i class="ni education_hat mr-2"></i>University of Computer Science
        </div>
        </div>
    </div>
    </div>
</div>
<div class="col-xl-8 order-xl-1 drop-zone">
    <div class="card draggable">
    <div class="card-header">
        <div class="row align-items-center">
        <div class="col-8">
            <h3 class="mb-0">Edit profile </h3>
        </div>
        <div class="col-4 text-right">
            <a href="#!" class="btn btn-sm btn-primary">Settings</a>
        </div>
        </div>
    </div>
    <div class="card-body">
        <form>
        <h6 class="heading-small text-muted mb-4">User information</h6>
        <div class="pl-lg-4">
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-username">Username</label>
                <input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-email">Email address</label>
                <input type="email" id="input-email" class="form-control" placeholder="[email protected]">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-first-name">First name</label>
                <input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-last-name">Last name</label>
                <input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
                </div>
            </div>
            </div>
        </div>
        <hr class="my-4">
        <!-- Address -->
        <h6 class="heading-small text-muted mb-4">Contact information</h6>
        <div class="pl-lg-4">
            <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                <label class="form-control-label" for="input-address">Address</label>
                <input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-city">City</label>
                <input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Country</label>
                <input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Postal code</label>
                <input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
                </div>
            </div>
            </div>
        </div>
        <hr class="my-4">
        <!-- Description -->
        <h6 class="heading-small text-muted mb-4">About me</h6>
        <div class="pl-lg-4">
            <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 4. It is Free and Open Source.</textarea>
            </div>
        </div>
        </form>
    </div>
    </div>
</div>
</div>

Profile Section Edit

Component from Argon Dashboard Builder

Profile Section Work

Component from Argon Dashboard Builder