Argon Dashboard Components
Discover 88 components available in Argon Dashboard
Button
Input Group
Component from
Argon Dashboard
Builder
<div class="form-group draggable">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>Dropdown
Component from
Argon Dashboard
Builder
<div class="dropdown draggable">
<button class="btn btn-dark dropdown-toggle mr-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>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'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-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'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>Input
Component from
Argon Dashboard
Builder
<input class="form-control draggable" placeholder="Input" draggable="true">Navbar Complex
Component from
Argon Dashboard
Builder
<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>
Requires JavaScript
Chart Bar
Component from
Argon Dashboard
Builder
<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>
<script>
var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
</script>
Header Profile
Component from
Argon Dashboard
Builder
<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>Table Excel
Component from
Argon Dashboard
Builder
<div class="card table-responsive draggable">
<div class="card-header border-bottom-0">
<h5>Table Excel</h5>
</div>
<table class="table" data-integration="excel">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Progress
Component from
Argon Dashboard
Builder
<div class="progress-wrapper draggable">
<div class="progress-info">
<div class="progress-label">
<span>Task completed</span>
</div>
<div class="progress-percentage">
<span>60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>