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>