Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Chakra UI Dashboard Horizon UI Dashboard Riva Dashboard Tailwind Asteria Dashboard Soft UI Dashboard Tailwind Soft UI Dashboard Motion Landing Library React Soft UI Design System Motion Landing Library Argon Dashboard AdminKit
All 380
Forms 9
Navbars 27
Sidebars 19
Components 27
Tables 24
Teams Section 8
Typography 24
Headers 30
Cards 38
Cards Section 28
Contacts Section 9
Profiles Section 8
Charts 14
Tables Section 11
Projects Section 10
Charts Section 4
Testimonials 9
Faq 1
Blogs 11
Contents 10
Stats 4
Authentication 7
Features 16
Teams 5
Call To Actions 9
Logo Areas 3
Contact Us 2
Pricing 4

Bootstrap - All Components

Discover 380 Bootstrap components available in Loopple

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

Component from Argon Dashboard Builder 
<div class="row removable">
  <div class="col-xl-8 drop-zone">
    <div class="card draggable">
      <div class="card-header border-0">
        <div class="row align-items-center">
          <div class="col">
            <h3 class="mb-0">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-flush">
          <thead class="thead-light">
            <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 draggable">
      <div class="card-header border-0">
        <div class="row align-items-center">
          <div class="col">
            <h3 class="mb-0">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-flush">
          <thead class="thead-light">
            <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 Teams Simple

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" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Alex Mirrial</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">CEO</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Miriam Jockson</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">CTO</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Alice Kambell</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">Full-Stack Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Johanna Sielle</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">Front-End Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Typography P

Component from Argon Dashboard Builder 
<p class="draggable">p. Argon text</p>

Modal

Component from Argon Dashboard Builder 
<button type="button" class="btn btn-primary draggable" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Table Progress

Component from Argon Dashboard Builder 
<div class="card draggable">
    <div class="card-header border-0">
      <div class="row align-items-center">
        <div class="col">
          <h3 class="mb-0">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">
      <table class="table align-items-center table-flush">
        <thead class="thead-light">
          <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>