Rating Card
108 Ratings
Code Example
<div class="card"> <div class="card-inner"> <div class="team"> <div class="user-card user-card-s2"> <div class="user-avatar md bg-info"> <span>JL</span> <div class="status dot dot-lg dot-success"></div> </div> <div class="user-info"> <h6>Joe Larson</h6> <span class="sub-text">@larson</span> </div> <ul class="rating mt-1"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> <div class="team-details pt-0"> <p>I am an UI/UX Designer and Love to be creative.</p> </div> <ul class="team-statistics"> <li><span>213</span><span>Projects</span></li> <li><span>87.5%</span><span>Performed</span></li> <li><span>587</span><span>Tasks</span></li> </ul> <div class="team-view"> <a href="#" class="btn btn-round btn-outline-light w-150px"><span>View Profile</span></a> </div> </div><!-- .team --> </div><!-- .card-inner --> </div><!-- .card --> <div class="card"> <div class="card-inner"> <div class="rating-card d-flex align-center flex-column"> <div class="user-info mb-2"> <h6>Design Quality</h6> </div> <div class="user-avatar md bg-teal m-2"> <span>4.5</span> <div class="status dot dot-lg dot-success"></div> </div> <ul class="rating mt-1"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> </ul> </div> <div class="text-center mt-1"> <p>108 Ratings</p> </div> <div class="gy-3 pt-4"> <div class="progress-rating"> <div class="progress-rating-title">5 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar bg-teal" data-progress="72"></div> </div> <div class="progress-rating-percent">72%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">4 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar bg-success" data-progress="58"></div> </div> <div class="progress-rating-percent">58%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">3 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar bg-info" data-progress="34"></div> </div> <div class="progress-rating-percent">34%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">2 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar bg-warning" data-progress="18"></div> </div> <div class="progress-rating-percent">18%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">1 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar bg-danger" data-progress="55"></div> </div> <div class="progress-rating-percent">55%</div> </div> </div> </div><!-- .card-inner --> </div><!-- .card -->
Customer Review
4.4
47,860 TotalCode Example
<div class="card"> <div class="card-inner"> <div class="rating-card text-center mb-1"> <h6 class="title">Customer Review</h6> <div class="rating-wrap bg-light rating-pill my-1"> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <span class="amount">3.5 out of 5</span> </div> <span class="sub-text mt-1">40 customers ratings</span> </div> <div class="pt-3 gy-3"> <div class="progress-rating"> <div class="progress-rating-title">5 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="62"></div> </div> <div class="progress-rating-percent">62%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">4 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="47"></div> </div> <div class="progress-rating-percent">47%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">3 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="24"></div> </div> <div class="progress-rating-percent">24%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">2 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="30"></div> </div> <div class="progress-rating-percent">30%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">1 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="40"></div> </div> <div class="progress-rating-percent">40%</div> </div> </div> </div><!-- .card-inner --> </div><!-- .card --> <div class="card"> <div class="card-inner"> <div class="rating-card text-center mb-1"> <h6 class="title">Customer Review</h6> <div class="rating-wrap bg-light rating-pill my-1"> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <span class="amount">3.5 out of 5</span> </div> <span class="sub-text mt-1">40 customers ratings</span> </div> <div class="pt-3 gy-3"> <div class="progress-rating"> <div class="progress-rating-title">5 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="62"></div> </div> <div class="progress-rating-percent">62%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">4 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="47"></div> </div> <div class="progress-rating-percent">47%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">3 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="24"></div> </div> <div class="progress-rating-percent">24%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">2 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="30"></div> </div> <div class="progress-rating-percent">30%</div> </div> <div class="progress-rating"> <div class="progress-rating-title">1 star</div> <div class="progress progress-md progress-alt"> <div class="progress-bar" data-progress="40"></div> </div> <div class="progress-rating-percent">40%</div> </div> </div> </div><!-- .card-inner --> </div><!-- .card -->
User Profile
UI/UX Designer at Google
- 60311 Frankfurt am Main, Italy
- 28th Sept, 2021
- Fulltime
Developer at Softnio
- 60311 Frankfurt am Main, Italy
- 28th Sept, 2021
- Fulltime
Code Example
<div class="card"> <div class="card-inner"> <h4 class="card-title mb-1">UI/UX Designer at Google</h4> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <div class="d-flex justify-content-between align-items-end"> <ul class="pt-2 gy-1"> <li><em class="icon ni ni-map-pin"></em><span>60311 Frankfurt am Main, Italy</span></li> <li><em class="icon ni ni-calender-date"></em><span>28th Sept, 2021</span></li> <li><em class="icon ni ni-briefcase"></em><span>Fulltime</span></li> </ul> <span class="badge badge-dim badge-sm rounded-pill bg-outline-info">$1550.00</span> </div> <div class="collapse" id="collapseDes1"> <div class="divider"></div> <div class="rating-card-description"> <h5 class="card-title">Description</h5> <p class="text-muted">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title bulk.</p> <ul class="pt-2 gy-1"> <li><em class="icon ni ni-check-circle"></em><span>30 days off</span></li> <li><em class="icon ni ni-check-circle"></em><span>Free drinks</span></li> <li><em class="icon ni ni-check-circle"></em><span>Paid leave</span></li> <li><em class="icon ni ni-check-circle"></em><span>Healthcare</span></li> </ul> </div> </div> </div> <div class="card-footer rating-card-footer bg-light border-top d-flex align-center justify-content-between"> <a class="switch-text collapsed" data-toggle="collapse" href="#collapseDes1"> <div class="link link-gray switch-text-normal"> <span>Less Info</span><em class="icon ni ni-upword-ios"></em> </div> <div class="link link-gray switch-text-collapsed"> <span>More Info</span><em class="icon ni ni-downward-ios"></em> </div> </a> <a href="#" class="btn btn-primary">Apply</a> </div> </div> <div class="card"> <div class="card-inner"> <h4 class="card-title mb-1">Developer at Softnio</h4> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <div class="d-flex justify-content-between align-items-end"> <ul class="pt-2 gy-1"> <li><em class="icon ni ni-map-pin"></em><span>60311 Frankfurt am Main, Italy</span></li> <li><em class="icon ni ni-calender-date"></em><span>28th Sept, 2021</span></li> <li><em class="icon ni ni-briefcase"></em><span>Fulltime</span></li> </ul> <span class="badge badge-dim badge-sm rounded-pill bg-outline-info">$1550.00</span> </div> <div class="collapse show" id="collapseDes2"> <div class="divider"></div> <div class="rating-card-description"> <h5 class="card-title">Description</h5> <p class="text-muted">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title bulk.</p> <ul class="pt-2 gy-1"> <li><em class="icon ni ni-check-circle"></em><span>30 days off</span></li> <li><em class="icon ni ni-check-circle"></em><span>Free drinks</span></li> <li><em class="icon ni ni-check-circle"></em><span>Paid leave</span></li> <li><em class="icon ni ni-check-circle"></em><span>Healthcare</span></li> </ul> </div> </div> </div> <div class="card-footer rating-card-footer bg-light border-top d-flex align-center justify-content-between"> <a class="switch-text" data-toggle="collapse" href="#collapseDes2"> <div class="link link-gray switch-text-normal"> <span>Less Info</span><em class="icon ni ni-upword-ios"></em> </div> <div class="link link-gray switch-text-collapsed"> <span>More Info</span><em class="icon ni ni-downward-ios"></em> </div> </a> <a href="#" class="btn btn-primary">Apply</a> </div> </div>
Institute Profile
Softnio
Criteria on Softnio
Code Example
<div class="card"> <div class="card-inner"> <h4 class="card-title mb-1">Softnio</h4> <div class="rating-wrap my-1"> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <span class="amount ms-2">4.4 (78)</span> </div> <h5 class="card-title mt-4">Criteria on Softnio</h5> <div class="rating-card"> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Productivity</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Competitive Position</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Brand Value</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Environment</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> </div> <div class="collapse" id="collapseDes3"> <div class="divider"></div> <div class="rating-card-description"> <h5 class="card-title">Description</h5> <p class="text-muted">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title bulk.</p> <ul class="pt-2 gy-1"> <li><em class="icon ni ni-check-circle"></em><span>30 days off</span></li> <li><em class="icon ni ni-check-circle"></em><span>Free drinks</span></li> <li><em class="icon ni ni-check-circle"></em><span>Paid leave</span></li> <li><em class="icon ni ni-check-circle"></em><span>Healthcare</span></li> </ul> </div> </div> </div> <div class="card-footer rating-card-footer bg-light border-top d-flex align-center justify-content-between"> <a class="switch-text collapsed" data-toggle="collapse" href="#collapseDes3"> <div class="link link-gray switch-text-normal"> <span>Less Info</span><em class="icon ni ni-upword-ios"></em> </div> <div class="link link-gray switch-text-collapsed"> <span>More Info</span><em class="icon ni ni-downward-ios"></em> </div> </a> <a href="#" class="btn btn-primary">Apply</a> </div> </div>
Review form
Softnio
Criteria on Softnio
Softnio
Criteria on Softnio
Code Example
<div class="card"> <div class="card-inner"> <h4 class="card-title mb-1">Softnio</h4> <div class="rating-wrap my-1"> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <span class="amount ms-2">4.4 (78)</span> </div> <form action="#" class="mt-2"> <div class="form-group"> <label class="form-label" for="title">Title</label> <div class="form-control-wrap"> <input type="text" class="form-control" id="title" value="You only miss it when it gone!" required> </div> </div> <div class="form-group"> <label class="form-label" for="job-title">Job Title</label> <div class="form-control-wrap"> <input type="text" class="form-control" id="job-title" value="Sr. Frontend Developer" required> </div> </div> <div class="form-group"> <label class="form-label" for="review">How was your experience?</label> <div class="form-control-wrap"> <textarea class="form-control no-resize" id="review">I've been using Dashlite for months now and with every update, it's just becoming better. Thank you for such a great design touch. Really love it</textarea> </div> </div> </form> <h5 class="card-title mt-5">Criteria on Softnio</h5> <div class="rating-card"> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Productivity</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Competitive Position</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Brand Value</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Environment</span> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> </div> </div> <div class="card-footer bg-light border-top d-flex align-center justify-content-end py-3"> <a href="#" class="btn btn-primary">Publish Review</a> </div> </div> <div class="card"> <div class="card-inner"> <h4 class="card-title mb-1">Softnio</h4> <div class="rating-wrap my-1"> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> <span class="amount ms-2">4.4 (78)</span> </div> <form action="#" class="mt-2"> <div class="form-group"> <label class="form-label" for="rt-title">Title</label> <div class="form-control-wrap"> <input type="text" class="form-control" id="rt-title" placeholder="Title" required> </div> </div> <div class="form-group"> <label class="form-label" for="rt-job-title">Job Title</label> <div class="form-control-wrap"> <input type="text" class="form-control" id="rt-job-title" placeholder="Job Title" required> </div> </div> <div class="form-group"> <label class="form-label" for="rt-review">How was your experience?</label> <div class="form-control-wrap"> <textarea class="form-control no-resize" id="rt-review" placeholder="Describe your experience at Softnio"></textarea> </div> </div> </form> <h5 class="card-title mt-5">Criteria on Softnio</h5> <div class="rating-card"> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Productivity</span> <ul class="rating"> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Competitive Position</span> <ul class="rating"> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Brand Value</span> <ul class="rating"> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> <div class="d-flex align-center justify-content-between py-1"> <span class="text-muted">Environment</span> <ul class="rating"> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> <li><em class="icon ni ni-star"></em></li> </ul> </div> </div> </div> <div class="card-footer bg-light border-top d-flex align-center justify-content-end py-3"> <a href="#" class="btn btn-primary">Publish Review</a> </div> </div>
Customers Ratings
Design Quality
by Softnio
13 days agoFeature Quality
by Softnio6 days ago
I've been using Dashlite for months now and with every update, update it's just becoming more and more better it's just becoming better. Thank you for such a great design touch. Further I definitely cooperate with your product . Highly appriciate it. Really love it
AB
Abu Bin IshiyakAuthor
Time zone depend on your server time as we use that by default. So you need to change that from your server. For data display issues, you may send your website url so we can check what actually wrong.
IB
Ifrat Binte
Thanks for the help. Really great support.
Code Example
<div class="card"> <div class="card-inner py-3"> <div class="d-flex align-center justify-content-between"> <div> <h5 class="title">Design Quality</h5> <div class="d-sm-flex"> <p class="m-0 pe-2">by <a href="#">softnio</a></p> <span>13 days ago</span> </div> </div> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul><!-- .rating --> </div> </div> </div><!-- .card --> <div class="card"> <div class="card-inner border-bottom bg-lighter py-3"> <div class="d-flex align-center justify-content-between"> <div> <h5 class="title">Feature Quality</h5> <div class="d-sm-flex"> <p class="m-0 pe-2">by <a href="#">softnio</a></p> <span>6 days ago</span> </div> </div> <ul class="rating"> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-fill"></em></li> <li><em class="icon ni ni-star-half-fill"></em></li> <li><em class="icon ni ni-star"></em></li> </ul><!-- .rating --> </div> </div> <div class="card-inner"> <p>I've been using Dashlite for months now and with every update, update it's just becoming more and more better it's just becoming better. Thank you for such a great design touch. Further I definitely cooperate with your product . Highly appriciate it. Really love it</p> </div> <div class="card-inner border-top"> <div class="d-flex"> <div class="user-avatar md bg-purple me-3"> <span>AB</span> </div> <div> <h5 class="mt-0">Abu Bin Ishiyak <span class="badge badge-dim bg-outline-info ms-1">Author</span></h5> <p>Thank you for your valuable feedback.</p> <p>Time zone depend on your server time as we use that by default. So you need to change that from your server. For data display issues, you may send your website url so we can check what actually wrong.</p> </div> </div> </div> <div class="card-inner border-top"> <div class="d-flex"> <div class="user-avatar md bg-info me-3"> <span>IB</span> </div> <div> <h5 class="mt-0">Ifrat Binte<span class="badge badge-dim bg-outline-success ms-1">Purchased</span></h5> <p>Thanks for the help. Really great support.</p> </div> </div> </div> </div><!-- .card -->
Customization
You can use customize rating icon for customizing the component.
Code Example
<ul class="rating text-danger"> <li><em class="icon ni ni-heart-fill"></em></li> <li><em class="icon ni ni-heart-fill"></em></li> <li><em class="icon ni ni-heart-fill"></em></li> <li><em class="icon ni ni-heart-fill"></em></li> <li><em class="icon ni ni-heart"></em></li> </ul>
