97 lines
4.3 KiB
HTML
97 lines
4.3 KiB
HTML
{% set title = 'Components › Empty State' %}
|
|
{% set page = 'components-empty-state.html' %}
|
|
{% extends 'layouts/master.html' %}
|
|
|
|
{% block content %}
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Empty State</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
|
<div class="breadcrumb-item">Empty State</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Empty States</h2>
|
|
<p class="section-lead">Empty state are generally used when there is no data or content.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Empty Data</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="empty-state" data-height="400">
|
|
<div class="empty-state-icon">
|
|
<i class="fas fa-question"></i>
|
|
</div>
|
|
<h2>We couldn't find any data</h2>
|
|
<p class="lead">
|
|
Sorry we can't find any data, to get rid of this message, make at least 1 entry.
|
|
</p>
|
|
<a href="#" class="btn btn-primary mt-4">Create new One</a>
|
|
<a href="#" class="mt-4 bb">Need Help?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Whoops</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="empty-state" data-height="600">
|
|
<img class="img-fluid" src="../assets/img/drawkit/drawkit-full-stack-man-colour.svg" alt="image">
|
|
<h2 class="mt-0">We can't reach the server</h2>
|
|
<p class="lead">
|
|
We were unable to reach the server, it seemed like it was sleeping, so we were reluctant to wake it up.
|
|
</p>
|
|
<a href="#" class="btn btn-warning mt-4">Try Again</a>
|
|
<a href="#" class="mt-4 bb">Need Help?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Request Failed</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="empty-state" data-height="400">
|
|
<div class="empty-state-icon bg-danger">
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
<h2>HTTP Request Failed</h2>
|
|
<p class="lead">
|
|
We tried it, but failed when requesting data to the server, sorry. (Code: <a href="#" class="bb">14045</a>)
|
|
</p>
|
|
<a href="#" class="btn btn-warning mt-4">Try Again</a>
|
|
<a href="#" class="mt-4 bb">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Not Found</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="empty-state" data-height="600">
|
|
<img class="img-fluid" src="../assets/img/drawkit/drawkit-nature-man-colour.svg" alt="image">
|
|
<h2 class="mt-0">Looks like you got lost</h2>
|
|
<p class="lead">
|
|
We can't find the path you're looking for, check the path again and try again.
|
|
</p>
|
|
<a href="#" class="btn btn-warning mt-4">Try Again</a>
|
|
<a href="#" class="mt-4 bb">Need Help?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|