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

widget-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/400x300.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/90x90.jpg" 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

<div class="card component-card_4"><div class="card-body"><div class="user-profile"><img src="assets/img/90x90.jpg" 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.

<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/90x90.jpg" 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.

<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)
(94)
<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
IN PROGRESS
  • avatar
  • avatar
  • avatar
  • avatar
  • +5 more
60%
<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/90x90.jpg" class="ml-0"></li><li class="list-inline-item chat-online-usr"><img alt="avatar" src="assets/img/90x90.jpg"></li><li class="list-inline-item chat-online-usr"><img alt="avatar" src="assets/img/90x90.jpg"></li><li class="list-inline-item chat-online-usr"><img alt="avatar" src="assets/img/90x90.jpg"></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

widget-card-2

25 Sep 2019

How to Start a Blog in 5 Easy Steps.

Vestibulum vestibulum tortor ut eros tincidunt,ut rutrum elit volutpat.

AG
Luke Ivory
51
250
<div class="card component-card_9"><img src="assets/img/400x300.jpg" class="card-img-top" alt="widget-card-2"><div class="card-body"><p class="meta-date">25 Sep 2019</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>