

Argon Dashboard Components
Discover 88 components available in Argon Dashboard
Chart Bar

<div class="card draggable">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
</div>
</div>
</div>
<div class="card draggable">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
</div>
</div>
</div>
Table Sell
Table Authors
Card List Group
Card Balance
Table Watchlist
Navbar Complex
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="navbar-search navbar-search-light form-inline mr-sm-3 mb-0" id="navbar-search-main">
<div class="form-group mb-0">
<div class="input-group input-group-alternative input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" placeholder="Search" type="text">
</div>
</div>
<button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</form>
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<div class="pr-3 sidenav-toggler sidenav-toggler-dark active" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden">
<div class="px-3 py-3">
<h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
</div>
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>2 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-2.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>3 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">A new issue has been reported for Argon.</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>5 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Your posts have been liked a lot.</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-4.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>2 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-5.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>3 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">A new issue has been reported for Argon.</p>
</div>
</div>
</a>
</div>
<a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-layer-group"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right ">
<div class="row shortcuts px-4">
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-red">
<i class="fa fa-calendar"></i>
</span>
<small class="text-white">Calendar</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-orange">
<i class="fa fa-envelope"></i>
</span>
<small class="text-white">Email</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-info">
<i class="fa fa-credit-card"></i>
</span>
<small class="text-white">Payments</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-green">
<i class="fa fa-book"></i>
</span>
<small class="text-white">Reports</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-purple">
<i class="fa fa-map"></i>
</span>
<small class="text-white">Maps</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
<i class="fa fa-store"></i>
</span>
<small class="text-white">Shop</small>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">John Snow</span>
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome!</h6>
</div>
<a href="#!" class="dropdown-item">
<i class="fa fa-user"></i>
<span>My profile</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fa fa-tools"></i>
<span>Settings</span>
</a>
<a href="#!" class="dropdown-item">
<i class="far fa-calendar"></i>
<span>Activity</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fa fa-phone"></i>
<span>Support</span>
</a>
<div class="dropdown-divider"></div>
<a href="#!" class="dropdown-item">
<i class="fa fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
</div>
Card Image
Header Profile

<div class="header d-flex align-items-center rounded-lg removable draggable" style="min-height: 500px; background-image: url(https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
<!-- Mask -->
<span class="mask bg-gradient-default rounded-lg opacity-8"></span>
<!-- Header container -->
<div class="container-fluid d-flex align-items-center">
<div class="row">
<div class="col-lg-7 col-md-10">
<h1 class="display-2 text-white">Hello Jesse</h1>
<p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you have made with your work and manage your projects or assigned tasks</p>
<a href="#!" class="btn btn-neutral">Edit profile</a>
</div>
</div>
</div>
</div>
<div class="header d-flex align-items-center rounded-lg removable draggable" style="min-height: 500px; background-image: url(https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
<!-- Mask -->
<span class="mask bg-gradient-default rounded-lg opacity-8"></span>
<!-- Header container -->
<div class="container-fluid d-flex align-items-center">
<div class="row">
<div class="col-lg-7 col-md-10">
<h1 class="display-2 text-white">Hello Jesse</h1>
<p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you have made with your work and manage your projects or assigned tasks</p>
<a href="#!" class="btn btn-neutral">Edit profile</a>
</div>
</div>
</div>
</div>
Pills

<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'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'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'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>
<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'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'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'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>