Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Horizon UI Dashboard Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Soft UI Design System Soft UI Dashboard Tailwind Argon Dashboard
All 88
Charts 2
Tables 10
Cards 18
Navbars 6
Headers 2
Components 7
Forms 4
Sidebars 6
Charts Section 1
Cards Section 7
Tables Section 3
Projects Section 4
Teams Section 3
Typography 8
Profiles Section 3
Contacts Section 3

Argon Dashboard Components

Discover 88 components available in Argon Dashboard

Card Simple

Component from Argon Dashboard Builder 
<div class="card draggable">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Card Stats

Component from Argon Dashboard Builder 
<div class="card card-stats draggable">
  <div class="card-body">
    <div class="row">
      <div class="col">
        <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
        <span class="h2 font-weight-bold mb-0">2,356</span>
      </div>
      <div class="col-auto">
        <div class="icon icon-shape bg-orange text-white rounded-circle shadow">
          <i class="fa fa-chart-pie"></i>
        </div>
      </div>
    </div>
    <p class="mt-3 mb-0 text-sm">
      <span class="text-success mr-2">
        <i class="fa fa-arrow-up"></i> 3.48% </span>
      <span class="text-nowrap">Since last month</span>
    </p>
  </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>

Sidebar Complex

Component from Argon Dashboard Builder 
<div class="sidenav-header  align-items-center">
  <a class="navbar-brand" href="javascript:void(0)">
    <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="...">
  </a>
</div>
<div class="navbar-inner">
  <div class="collapse navbar-collapse" id="sidenav-collapse-main">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="javascript:">
          <i class="fa fa-desktop text-primary"></i>
          <span class="nav-link-text">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:">
          <i class="fa fa-globe text-info"></i>
          <span class="nav-link-text">Icons</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:">
          <i class="fa fa-map-marker text-warning"></i>
          <span class="nav-link-text">Maps</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:">
          <i class="fa fa-table text-dark"></i>
          <span class="nav-link-text">Tables</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:">
          <i class="fa fa-lock text-danger"></i>
          <span class="nav-link-text">Login</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:">
          <i class="fa fa-key text-success"></i>
          <span class="nav-link-text">Register</span>
        </a>
      </li>
    </ul>
    <hr class="my-3">
    <h6 class="navbar-heading p-0 text-muted">
    <span class="docs-normal">Documentation</span>
    </h6>
    <ul class="navbar-nav mb-md-3">
    <li class="nav-item">
      <a class="nav-link" href="javascript:">
        <i class="fa fa-rocket"></i>
        <span class="nav-link-text">Getting started</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:">
        <i class="fa fa-palette"></i>
        <span class="nav-link-text">Foundation</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:">
        <i class="fa fa-chart-pie"></i>
        <span class="nav-link-text">Components</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:">
        <i class="fa fa-puzzle-piece"></i>
        <span class="nav-link-text">Plugins</span>
      </a>
    </li>
  </ul>
  </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>
Requires JavaScript

Section Charts

Component from Argon Dashboard Builder 
<div class="row removable">
  <div class="col-xl-8 drop-zone">
    <div class="card bg-default draggable">
      <div class="card-header bg-transparent">
        <div class="row align-items-center">
          <div class="col">
            <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
            <h5 class="h3 text-white mb-0">Sales value</h5>
          </div>
          <div class="col">
            <ul class="nav nav-pills justify-content-end">
              <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales-dark" data-update="{&quot;data&quot;:{&quot;datasets&quot;:[{&quot;data&quot;:[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}" data-prefix="$" data-suffix="k">
                <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
                  <span class="d-none d-md-block">Month</span>
                  <span class="d-md-none">M</span>
                </a>
              </li>
              <li class="nav-item" data-toggle="chart" data-target="#chart-sales-dark" data-update="{&quot;data&quot;:{&quot;datasets&quot;:[{&quot;data&quot;:[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}" data-prefix="$" data-suffix="k">
                <a href="#" class="nav-link py-2 px-3" data-toggle="tab">
                  <span class="d-none d-md-block">Week</span>
                  <span class="d-md-none">W</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card-body">
        <!-- Chart -->
        <div class="chart">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <!-- Chart wrapper -->
          <canvas id="chart-sales-dark" class="chart-line chart-canvas chartjs-render-monitor" width="1342" height="700" style="display: block; height: 350px; width: 671px;"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 drop-zone">
    <div class="card draggable">
      <div class="card-header bg-transparent">
        <div class="row align-items-center">
          <div class="col">
            <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
            <h5 class="h3 mb-0">Total orders</h5>
          </div>
        </div>
      </div>
      <div class="card-body">
        <!-- Chart -->
        <div class="chart">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chart-bars" class="chart-bar chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 297px;" width="594" height="700"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
var chartsLine = document.querySelectorAll(".chart-line");

chartsLine.forEach(function(chart) {
    if (!chart.getAttribute('data-chart-initialized')) {

        new Chart(chart, {
            type: "line",
            data: {
                labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Performance",
                    tension: 0.4,
                    borderWidth: 4,
                    borderColor: "#5e72e4",
                    pointRadius: 0,
                    backgroundColor: "transparent",
                    data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
                }, ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                tooltips: {
                    enabled: true,
                    mode: "index",
                    intersect: false,
                },
                scales: {
                    yAxes: [{
                        barPercentage: 1.6,
                        gridLines: {
                            drawBorder: false,
                            color: "rgba(29,140,248,0.0)",
                            zeroLineColor: "transparent",
                        },
                        ticks: {
                            padding: 0,
                            fontColor: "#8898aa",
                            fontSize: 13,
                            fontFamily: "Open Sans",
                        },
                    }, ],
                    xAxes: [{
                        barPercentage: 1.6,
                        gridLines: {
                            drawBorder: false,
                            color: "rgba(29,140,248,0.0)",
                            zeroLineColor: "transparent",
                        },
                        ticks: {
                            padding: 10,
                            fontColor: "#8898aa",
                            fontSize: 13,
                            fontFamily: "Open Sans",
                        },
                    }, ],
                },
                layout: {
                    padding: 0,
                },
            },
        });
        chart.setAttribute("data-chart-initialized", "true");
    }
});

 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>

Section Card Stats

Component from Argon Dashboard Builder 
<div class="row removable">
  <div class="col-xl-3 col-md-6 drop-zone">
    <div class="card card-stats draggable">
      <!-- Card body -->
      <div class="card-body">
        <div class="row">
          <div class="col">
            <h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
            <span class="h2 font-weight-bold mb-0">350,897</span>
          </div>
          <div class="col-auto">
            <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
              <i class="fa fa-user"></i>
            </div>
          </div>
        </div>
        <p class="mt-3 mb-0 text-sm">
          <span class="text-success mr-2">
            <i class="fa fa-arrow-up"></i> 3.48% </span>
          <span class="text-nowrap">Since last month</span>
        </p>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-md-6 drop-zone">
    <div class="card card-stats draggable">
      <!-- Card body -->
      <div class="card-body">
        <div class="row">
          <div class="col">
            <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
            <span class="h2 font-weight-bold mb-0">2,356</span>
          </div>
          <div class="col-auto">
            <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
              <i class="fa fa-chart-pie"></i>
            </div>
          </div>
        </div>
        <p class="mt-3 mb-0 text-sm">
          <span class="text-success mr-2">
            <i class="fa fa-arrow-up"></i> 3.48% </span>
          <span class="text-nowrap">Since last month</span>
        </p>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-md-6 drop-zone">
    <div class="card card-stats draggable">
      <!-- Card body -->
      <div class="card-body">
        <div class="row">
          <div class="col">
            <h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
            <span class="h2 font-weight-bold mb-0">924</span>
          </div>
          <div class="col-auto">
            <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
              <i class="fa fa-coins"></i>
            </div>
          </div>
        </div>
        <p class="mt-3 mb-0 text-sm">
          <span class="text-success mr-2">
            <i class="fa fa-arrow-up"></i> 3.48% </span>
          <span class="text-nowrap">Since last month</span>
        </p>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-md-6 drop-zone">
    <div class="card card-stats draggable">
      <!-- Card body -->
      <div class="card-body">
        <div class="row">
          <div class="col">
            <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
            <span class="h2 font-weight-bold mb-0">49,65%</span>
          </div>
          <div class="col-auto">
            <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
              <i class="fa fa-chart-bar"></i>
            </div>
          </div>
        </div>
        <p class="mt-3 mb-0 text-sm">
          <span class="text-success mr-2">
            <i class="fa fa-arrow-up"></i> 3.48% </span>
          <span class="text-nowrap">Since last month</span>
        </p>
      </div>
    </div>
  </div>
</div>

Section Card Stats Gradient

Component from Argon Dashboard Builder 
<div class="row removable">
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card bg-gradient-primary border-0 draggable">
        <!-- Card body -->
        <div class="card-body">
            <div class="row">
            <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0 text-white">Tasks completed</h5>
                <span class="h2 font-weight-bold mb-0 text-white">8/24</span>
                <div class="progress progress-xs mt-3 mb-0">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                </div>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                <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>
            </div>
            <p class="mt-3 mb-0 text-sm">
            <a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
            </p>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card bg-gradient-info border-0 draggable">
        <!-- Card body -->
        <div class="card-body">
            <div class="row">
            <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0 text-white">Contacts</h5>
                <span class="h2 font-weight-bold mb-0 text-white">123/267</span>
                <div class="progress progress-xs mt-3 mb-0">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                </div>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                <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>
            </div>
            <p class="mt-3 mb-0 text-sm">
            <a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
            </p>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card bg-gradient-danger border-0 draggable">
        <!-- Card body -->
        <div class="card-body">
            <div class="row">
            <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0 text-white">Items sold</h5>
                <span class="h2 font-weight-bold mb-0 text-white">200/300</span>
                <div class="progress progress-xs mt-3 mb-0">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                </div>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                <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>
            </div>
            <p class="mt-3 mb-0 text-sm">
            <a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
            </p>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card bg-gradient-default border-0 draggable">
        <!-- Card body -->
        <div class="card-body">
            <div class="row">
            <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0 text-white">Notifications</h5>
                <span class="h2 font-weight-bold mb-0 text-white">50/62</span>
                <div class="progress progress-xs mt-3 mb-0">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                </div>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                <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>
            </div>
            <p class="mt-3 mb-0 text-sm">
            <a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
            </p>
        </div>
        </div>
    </div>
</div>

Section Tables Dark

Component from Argon Dashboard Builder 
<div class="row removable">
  <div class="col-xl-8 drop-zone">
    <div class="card bg-default draggable">
      <div class="card-header bg-transparent border-0">
        <div class="row align-items-center">
          <div class="col">
            <h3 class="mb-0 text-white">Page visits</h3>
          </div>
          <div class="col text-right">
            <a href="#!" class="btn btn-sm btn-primary">See all</a>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <!-- Projects table -->
        <table class="table align-items-center table-dark table-flush rounded">
          <thead class="thead-dark">
            <tr>
              <th scope="col">Page name</th>
              <th scope="col">Visitors</th>
              <th scope="col">Unique users</th>
              <th scope="col">Bounce rate</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row"> /argon/ </th>
              <td> 4,569 </td>
              <td> 340 </td>
              <td>
                <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
              </td>
            </tr>
            <tr>
              <th scope="row"> /argon/index.html </th>
              <td> 3,985 </td>
              <td> 319 </td>
              <td>
                <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
              </td>
            </tr>
            <tr>
              <th scope="row"> /argon/charts.html </th>
              <td> 3,513 </td>
              <td> 294 </td>
              <td>
                <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
              </td>
            </tr>
            <tr>
              <th scope="row"> /argon/tables.html </th>
              <td> 2,050 </td>
              <td> 147 </td>
              <td>
                <i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
              </td>
            </tr>
            <tr>
              <th scope="row"> /argon/profile.html </th>
              <td> 1,795 </td>
              <td> 190 </td>
              <td>
                <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-xl-4 drop-zone">
    <div class="card bg-default draggable">
      <div class="card-header bg-transparent border-0">
        <div class="row align-items-center">
          <div class="col">
            <h3 class="mb-0 text-white">Social traffic</h3>
          </div>
          <div class="col text-right">
            <a href="#!" class="btn btn-sm btn-primary">See all</a>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <!-- Projects table -->
        <table class="table align-items-center table-dark table-flush rounded">
          <thead class="thead-dark">
            <tr>
              <th scope="col">Referral</th>
              <th scope="col">Visitors</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row"> Facebook </th>
              <td> 1,480 </td>
              <td>
                <div class="d-flex align-items-center">
                  <span class="mr-2">60%</span>
                  <div>
                    <div class="progress">
                      <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row"> Facebook </th>
              <td> 5,480 </td>
              <td>
                <div class="d-flex align-items-center">
                  <span class="mr-2">70%</span>
                  <div>
                    <div class="progress">
                      <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row"> Google </th>
              <td> 4,807 </td>
              <td>
                <div class="d-flex align-items-center">
                  <span class="mr-2">80%</span>
                  <div>
                    <div class="progress">
                      <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row"> Instagram </th>
              <td> 3,678 </td>
              <td>
                <div class="d-flex align-items-center">
                  <span class="mr-2">75%</span>
                  <div>
                    <div class="progress">
                      <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row"> twitter </th>
              <td> 2,645 </td>
              <td>
                <div class="d-flex align-items-center">
                  <span class="mr-2">30%</span>
                  <div>
                    <div class="progress">
                      <div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Section Projects

Component from Argon Dashboard Builder 
<div class="row removable">
  <div class="col-xl-6 drop-zone">
    <!-- Members list group card -->
    <div class="card draggable">
      <!-- Card header -->
      <div class="card-header">
        <!-- Title -->
        <h5 class="h3 mb-0">Team members</h5>
      </div>
      <!-- Card body -->
      <div class="card-body">
        <!-- List group -->
        <ul class="list-group list-group-flush list my--3">
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
                </a>
              </div>
              <div class="col ml--2">
                <h4 class="mb-0">
                  <a href="#!">John Michael</a>
                </h4>
                <span class="text-success">●</span>
                <small>Online</small>
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-sm btn-primary">Add</button>
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
                </a>
              </div>
              <div class="col ml--2">
                <h4 class="mb-0">
                  <a href="#!">Alex Smith</a>
                </h4>
                <span class="text-warning">●</span>
                <small>In a meeting</small>
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-sm btn-primary">Add</button>
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
                </a>
              </div>
              <div class="col ml--2">
                <h4 class="mb-0">
                  <a href="#!">Samantha Ivy</a>
                </h4>
                <span class="text-danger">●</span>
                <small>Offline</small>
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-sm btn-primary">Add</button>
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
                </a>
              </div>
              <div class="col ml--2">
                <h4 class="mb-0">
                  <a href="#!">John Michael</a>
                </h4>
                <span class="text-success">●</span>
                <small>Online</small>
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-sm btn-primary">Add</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-xl-6 drop-zone">
    <!-- Progress track -->
    <div class="card draggable">
      <!-- Card header -->
      <div class="card-header">
        <!-- Title -->
        <h5 class="h3 mb-0">Progress track</h5>
      </div>
      <!-- Card body -->
      <div class="card-body">
        <!-- List group -->
        <ul class="list-group list-group-flush list my--3">
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
                </a>
              </div>
              <div class="col">
                <h5>Argon Design System</h5>
                <div class="progress progress-xs mb-0">
                  <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
                </a>
              </div>
              <div class="col">
                <h5>Angular Now UI Kit PRO</h5>
                <div class="progress progress-xs mb-0">
                  <div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
                </a>
              </div>
              <div class="col">
                <h5>Black Dashboard</h5>
                <div class="progress progress-xs mb-0">
                  <div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Avatar -->
                <a href="#" class="avatar rounded-circle">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
                </a>
              </div>
              <div class="col">
                <h5>React Material Dashboard</h5>
                <div class="progress progress-xs mb-0">
                  <div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>