Argon Dashboard Components

Discover 4 components available in Argon Dashboard

Tabs

Component from Argon Dashboard Builder
<div class="draggable">
    <div class="nav-wrapper">
        <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
            <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true"><i class="fa fa-home mr-2"></i>Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false"><i class="fa fa-bell mr-2"></i>Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false"><i class="fa fa-calendar mr-2"></i>Messages</a>
            </li>
        </ul>
    </div>
<div class="card shadow">
    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
                <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
            </div>
            <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">
                <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
            </div>
            <div class="tab-pane fade" id="tabs-icons-text-3" role="tabpanel" aria-labelledby="tabs-icons-text-3-tab">
                <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
            </div>
        </div>
    </div>
</div>
</div>

Profile Form

Component from Argon Dashboard Builder
<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>

Pills

Component from Argon Dashboard Builder
<div class="draggable">
    <div class="nav-wrapper">
        <ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
            <li class="nav-item">
                <a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="home" aria-selected="true">
                <span class="nav-link-icon d-block"><i class="fa fa-atom"></i></span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="profile" aria-selected="false">
                <span class="nav-link-icon d-block"><i class="fa fa-chart-line"></i></span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="contact" aria-selected="false">
                <span class="nav-link-icon d-block"><i class="fa fa-user"></i></span>
                </a>
            </li>
            </ul>
    </div>

    <div class="card shadow">
        <div class="card-body">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tabs_2_1" role="tabpanel" aria-labelledby="home-tab">
                    <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                    <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
                </div>
                <div class="tab-pane fade" id="tabs_2_2" role="tabpanel" aria-labelledby="profile-tab">
                    <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                </div>
                <div class="tab-pane fade" id="tabs_2_3" role="tabpanel" aria-labelledby="contact-tab">
                    <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Card Payment Form

Component from Argon Dashboard Builder