tabler-ui
Version:
Premium and Open Source dashboard template with responsive and high quality UI. For Free!
183 lines (168 loc) • 7.1 kB
HTML
---
layout: default
title: Homepage
menu: cards
---
<!--<div class="container">-->
<!--<nav class="breadcrumb breadcrumb-content">-->
<!--<a class="breadcrumb-item" href="javascript:void(0)">Library</a>-->
<!--<span class="breadcrumb-item active">Cards</span>-->
<!--</nav>-->
<!--</div>-->
<div class="container">
<div class="page-header">
<div>
<h1 class="page-title">Dashboard</h1>
<div class="page-description">
<ul class="list-inline list-inline-dots m-0">
<li class="list-inline-item">Section 500</li>
<li class="list-inline-item">English learning French</li>
<li class="list-inline-item">
<a href="javascript:void(0)">United states</a>
</li>
<li class="list-inline-item">7 students</li>
</ul>
</div>
</div>
</div>
<div class="row row-cards">
<div class="col-lg-6">
{% include cards/twitter.html %}
{% include cards/twitter.html %}
</div>
<div class="col-lg-6">
{% include cards/twitter.html show-image=true %}
</div>
<div class="col-lg-8">
{% include cards/http-request.html %}
</div>
<div class="col-12"></div>
<div class="col-md-3">
{% include cards/icon-box.html color="blue" icon="fa fa-eur" value="132" description="Sales" subtitle="12 waiting payments" %}
</div>
<div class="col-md-3">
{% include cards/icon-box.html color="green" icon="fa fa-shopping-bag" value="78" description="Orders" subtitle="32 shipped" %}
</div>
<div class="col-md-3">
{% include cards/icon-box.html color="red" icon="fa fa-user" value="1,352" description="Members" subtitle="163 registered today" %}
</div>
<div class="col-md-3">
{% include cards/icon-box.html color="yellow" icon="fa fa-comments" value="132" description="Comments" subtitle="16 waiting" %}
</div>
<div class="col-md-3">
{% include cards/price-box.html color="green" change=4 %}
</div>
<div class="col-md-3">
{% include cards/price-box.html title="Order status" subtitle="New order" color="red" value="738" change=-10 %}
</div>
<div class="col-md-3">
{% include cards/price-box.html title="Income status" subtitle="New income" color="blue" change=0 value="$3,205" %}
</div>
<div class="col-md-3">
{% include cards/price-box.html title="Customer status" subtitle="New users" color="yellow" value="118" change=3 %}
</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-hard-drive" icon-color="yellow" title="Capacity" value="105GB" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-dollar-sign" icon-color="green" title="Revenue" value="$1,345" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-alert-circle" icon-color="red" title="Errors" value="23" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="fe fe-twitter" icon-color="blue" title="Followers" value="1685" %}</div>
<div class="col-md-6 col-lg-4">
{% include cards/subcards.html %}
</div>
<div class="col-lg-8">
{% include cards/classroom.html %}
</div>
<div class="col-md-6 col-lg-4">
{% include cards/colors.html %}
{% include cards/calendar.html %}
</div>
<div class="col-md-6 col-lg-4">
{% include cards/chart-browsers.html %}
</div>
<div class="col-md-6 col-lg-4">
{% include cards/email-stats.html %}
</div>
<div class="col-12">
{% include cards/invoices.html %}
{% include cards/chart-visitors.html %}
</div>
<div class="col-lg-4 col-md-6">
{% include cards/chips.html %}
{% include cards/progress-circle.html %}
{% include cards/statuses.html %}
{% include cards/loader.html %}
{% include cards/progress.html %}
{% include cards/image-info.html %}
{% include cards/packages.html %}
{% include cards/map-germany.html %}
{% include cards/stock.html %}
{% include cards/match.html %}
{% include cards/profile-edit.html %}
{% include cards/sparkline.html type="bar" limit="16" %}
{% include cards/sparkline.html type="line" color="red" offset="60" limit="16" %}
{% include cards/options.html %}
{% include cards/chart-bg.html id="chart-bg-users" %}
{% include cards/avatars.html %}
{% include cards/media.html title="1530" color="primary" description="Total Leads" rate="20%" progress="20%" %}
{% include cards/media.html title="$8,530" color="warning" description="Total Payment" rate="0%" %}
{% include cards/photos.html %}
{% include cards/media.html title="16°C" color="warning" description="Warsaw, Poland" rate='<i class="wi wi-day-cloudy"></i>' %}
{% include cards/aside.html %}
{% include cards/links.html %}
{% include cards/store-product.html %}
{% include cards/color.html color="success" %}
{% include cards/follow.html %}
{% include cards/profile.html %}
{% include cards/centered.html %}
{% include cards/pills.html %}
{% include cards/color.html color="danger" %}
</div>
<div class="col-lg-8 col-md-6">
{% include cards/tasks.html %}
{% include cards/map-world.html %}
{% include cards/tickets.html %}
<div class="row">
<div class="col-lg-6">
{% include cards/profile-2.html %}
{% include cards/client.html %}
{% include cards/digit.html %}
<div class="row row-deck">
<div class="col-6">{% include cards/digit.html color="red" title="New feedback" digit="62" width="34%" %}</div>
<div class="col-6">{% include cards/digit.html color="green" title="Users online" digit="76" width="32%" %}</div>
</div>
{% include cards/digit.html color="yellow" title="Profit for this month" digit="$65,256" width="85%" %}
{% include cards/chart-bg.html id="chart-bg-revenue" description="Revenue" title="$5255" offset=60 rate="-3%" color="yellow" %}
{% include cards/server.html %}
{% include cards/media.html title="935" color="danger" description="Total Sales" rate="-1%" progress="75%" %}
{% include cards/media-inverse.html title="5324" color="success" description="New Orders" rate="60%" %}
{% include cards/image.html %}
{% include cards/header.html %}
{% include cards/border.html color="danger" %}
{% include cards/empty.html %}
{% include cards/color.html color="warning" %}
{% include cards/countries.html %}
{% include cards/all.html %}
{% include cards/register.html %}
{% include cards/search-custom.html %}
</div>
<div class="col-lg-6">
{% include cards/alert.html %}
{% include cards/finance.html %}
{% include cards/sales.html %}
{% include cards/chart-pie.html %}
{% include cards/chart-radar.html %}
{% include cards/message.html %}
{% include cards/image-bg.html %}
{% include cards/browsers.html %}
{% include cards/color.html color="dark" %}
{% include cards/footer.html %}
{% include cards/feed.html %}
{% include cards/list.html %}
{% include cards/tabs.html %}
{% include cards/color.html color="primary" %}
{% include cards/login.html %}
{% include cards/forgot.html %}
</div>
</div>
</div>
</div>
</div>