Card 1
Simple
Mauris nisi felis, placerat in volutpat id, varius et sapien.
<div class="card component-card_1">
<div class="card-body">
<div class="icon-svg">
<svg> ... </svg>
</div>
<h5 class="card-title">Simple</h5>
<p class="card-text">Mauris nisi felis, placerat in volutpat id, varius et sapien.</p>
</div>
</div>
Card 2
CLI Based
Etiam sed augue ac justo tincidunt posuere. Vivamus euismod eros, nec risus malesuada.
Explore More <div class="card component-card_2">
<img src="assets/img/grid-blog-style-3.jpg" class="card-img-top" alt="widget-card-2">
<div class="card-body">
<h5 class="card-title">CLI Based</h5>
<p class="card-text">Etiam sed augue ac justo tincidunt posuere. Vivamus euismod eros, nec risus malesuada.</p>
<a href="#" class="btn btn-primary">Explore More</a>
</div>
</div>
Card 3
Luke Ivory
Manager
Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
<div class="card component-card_3">
<div class="card-body">
<img src="assets/img/profile-7.jpeg" class="card-img-top" alt="...">
<h5 class="card-user_name">Luke Ivory</h5>
<p class="card-user_occupation">Manager</p>
<div class="card-star_rating">
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
</div>
<p class="card-text"> Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies. </p>
</div>
</div>
Card 4
Luke Ivory
Manager
Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
<div class="card component-card_4">
<div class="card-body">
<div class="user-profile">
<img src="assets/img/profile-7.jpeg" class="" alt="...">
</div>
<div class="user-info">
<h5 class="card-user_name">Luke Ivory</h5>
<p class="card-user_occupation">Manager</p>
<div class="card-star_rating">
<span class="badge badge-primary">4.5</span>
</div>
<p class="card-text"> Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies. </p>
</div>
</div>
</div>
Card 5
Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
Luke Ivory
Manager
<div class="card component-card_5">
<div class="card-body">
<p class="card-text"> Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies. </p>
<div class="user-info">
<img src="assets/img/profile-7.jpeg" class="card-img-top" alt="...">
<div class="media-body">
<h5 class="card-user_name">Luke Ivory</h5>
<p class="card-user_occupation">Manager</p>
</div>
</div>
</div>
</div>
Card 6
Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
Luke Ivory
Manager
<div class="card component-card_6">
<div class="card-body">
<p class="card-text"> Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies. </p>
<div class="user-info">
<div class="media-body">
<h5 class="card-user_name">Luke Ivory</h5>
<p class="card-user_occupation">Manager</p>
</div>
</div>
<div class="card-star_rating">
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
</div>
</div>
</div>
Card 7
Rating
(4.3)
<div class="card component-card_7">
<div class="card-body">
<h5 class="card-text">Rating</h5>
<h6 class="rating-count">(4.3)</h6>
<div class="rating-stars">
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<span class="r-rating-num">(94)</span>
</div>
</div>
</div>
Card 8
Placed Order
-
+5 more
<div class="card component-card_8">
<div class="card-body">
<div class="progress-order">
<div class="progress-order-header">
<div class="row">
<div class="col-md-6 col-sm-6 col-12">
<h6>Placed Order</h6>
</div>
<div class="col-md-6 pl-0 col-sm-6 col-12 text-right">
<span class="badge badge-info">IN PROGRESS</span>
</div>
</div>
</div>
<div class="progress-order-body">
<div class="row mt-4">
<div class="col-md-12">
<ul class="list-inline badge-collapsed-img mb-0 mb-3">
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-2.jpeg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-3.jpeg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-4.jpeg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="avatar" src="assets/img/profile-5.jpeg">
</li>
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="badge badge-info badge-pill">+5 more</span>
</div>
</li>
</ul>
</div>
<div class="col-md-12 text-right">
<span class=" p-o-percentage mr-4">60%</span>
<div class="progress p-o-progress mt-2">
<div class="progress-bar bg-primary" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Card 9
25 Sep 2020
How to Start a Blog in 5 Easy Steps.
Vestibulum vestibulum tortor ut eros tincidunt, ut rutrum elit volutpat.
<div class="card component-card_9">
<img src="assets/img/grid-blog-style-3.jpg" class="card-img-top" alt="widget-card-2">
<div class="card-body">
<p class="meta-date">25 Sep 2020</p>
<h5 class="card-title">How to Start a Blog in 5 Easy Steps.</h5>
<p class="card-text">Vestibulum vestibulum tortor ut eros tincidunt, ut rutrum elit volutpat.</p>
<div class="meta-info">
<div class="meta-user">
<div class="avatar avatar-sm">
<span class="avatar-title rounded-circle">AG</span>
</div>
<div class="user-name">Luke Ivory</div>
</div>
<div class="meta-action">
<div class="meta-likes">
<svg> ... </svg> 51
</div>
<div class="meta-view">
<svg> ... </svg> 250
</div>
</div>
</div>
</div>
</div>
Copyright © 2021 DesignReset, All rights reserved.
Coded with