@coreui/ajax
Version:
Open Source Bootstrap Admin Template
321 lines (319 loc) • 15.3 kB
HTML
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
Card title
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div class="card-footer">Card footer</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
<i class="fa fa-check"></i>Card with icon
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
Card with switch
<label class="switch switch-sm switch-text switch-info float-right mb-0">
<input type="checkbox" class="switch-input">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
Card with label
<span class="badge badge-success float-right">Success</span>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
Card with label
<span class="badge badge-pill badge-danger float-right">42</span>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card border-primary">
<div class="card-header">
Card outline
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card border-secondary">
<div class="card-header">
Card outline
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card border-success">
<div class="card-header">
Card outline
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card border-info">
<div class="card-header">
Card outline
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card border-warning">
<div class="card-header">
Card outline
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card border-danger">
<div class="card-header">
Card outline
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card card-accent-primary">
<div class="card-header">
Card with accent
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-accent-secondary">
<div class="card-header">
Card with accent
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-accent-success">
<div class="card-header">
Card with accent
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-accent-info">
<div class="card-header">
Card with accent
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-accent-warning">
<div class="card-header">
Card with accent
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-accent-danger">
<div class="card-header">
Card with accent
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-primary text-center">
<div class="card-body">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-success text-center">
<div class="card-body">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-info text-center">
<div class="card-body">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-warning text-center">
<div class="card-body">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-danger text-center">
<div class="card-body">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-primary text-center">
<div class="card-body">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-primary">
<div class="card-header">
Card title
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-success">
<div class="card-header">
Card title
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-info">
<div class="card-header">
Card title
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-warning">
<div class="card-header">
Card title
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card text-white bg-danger">
<div class="card-header">
Card title
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div>