logo logo-dark
logo logo-dark
Components

Card Style for Ratings

Use ratings card with variant for an invaluable source of feedback.

Rating Card

JL

I am an UI/UX Designer and Love to be creative.

  • 213Projects
  • 87.5%Performed
  • 587Tasks
View Profile
4.5

108 Ratings

5 star
72%
4 star
58%
3 star
34%
2 star
18%
1 star
55%
Code Example
    <div class="card card-bordered">
        <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 card-bordered">
        <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

Customer Review
3.5 out of 5
40 customers ratings
5 star
62%
4 star
47%
3 star
24%
2 star
30%
1 star
40%

4.4

47,860 Total
5
4
3
2
1
Code Example
    <div class="card card-bordered">
        <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 card-bordered">
        <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
$1550.00
Description

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.

  • 30 days off
  • Free drinks
  • Paid leave
  • Healthcare
Apply

Developer at Softnio

  • 60311 Frankfurt am Main, Italy
  • 28th Sept, 2021
  • Fulltime
$1550.00
Description

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.

  • 30 days off
  • Free drinks
  • Paid leave
  • Healthcare
Less Info
More Info
Apply
Code Example
    <div class="card card-bordered">
        <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-bs-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 card-bordered">
        <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-bs-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

4.4 (78)
Criteria on Softnio
Productivity
Competitive Position
Brand Value
Environment
Description

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.

  • 30 days off
  • Free drinks
  • Paid leave
  • Healthcare
Apply
Code Example
    <div class="card card-bordered">
        <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-bs-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

4.4 (78)
Criteria on Softnio
Productivity
Competitive Position
Brand Value
Environment
Published Review

Softnio

4.4 (78)
Criteria on Softnio
Productivity
Competitive Position
Brand Value
Environment
Publish Review
Code Example
    <div class="card card-bordered">
        <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 card-bordered">
        <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 ago
Feature Quality
by softnio 6 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 card-bordered">
        <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 card-bordered">
        <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>
© 2022 DashLite. Template by Softnio