Cartzilla component

# Reviews

Display customer feedback with ratings, enhancing credibility and informing potential buyers.

#### Product review: Variant 1

Andrew Richards
May 7, 2024

- Color: Purple
- Model: 128GB

The iPhone 14 is nothing short of exceptional, combining cutting-edge technology with a design that continues to set the standard for premium smartphones. That's why it deserves a perfect 5-star rating.

- Pros: Unparalleled performance, great camera, stunning design
- Cons: No in my opinion

Reply Cartzilla Company May 8, 2024

Thank you for your feedback! We are glad that you were satisfied with your purchase :)

    <!-- Product review -->
    <div class="border-top border-bottom py-3">
      <div class="d-flex align-items-center mb-3">
        <div class="text-nowrap me-3">
          <span class="h6 mb-0">Andrew Richards</span>
          <i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
        </div>
        <span class="text-body-secondary fs-sm ms-auto">May 7, 2024</span>
      </div>
      <div class="d-flex gap-1 fs-sm pb-2 mb-1">
        <i class="ci-star-filled text-warning"></i>
        <i class="ci-star-filled text-warning"></i>
        <i class="ci-star-filled text-warning"></i>
        <i class="ci-star-filled text-warning"></i>
        <i class="ci-star-filled text-warning"></i>
      </div>
      <ul class="list-inline gap-2 pb-2 mb-1">
        <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Purple</li>
        <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
      </ul>
      <p class="fs-sm">The iPhone 14 is nothing short of exceptional, combining cutting-edge technology with a design that continues to set the standard for premium smartphones. That's why it deserves a perfect 5-star rating.</p>
      <ul class="list-unstyled fs-sm pb-2 mb-1">
        <li><span class="text-dark-emphasis fw-medium">Pros:</span> Unparalleled performance, great camera, stunning design</li>
        <li><span class="text-dark-emphasis fw-medium">Cons:</span> No in my opinion</li>
      </ul>
      <div class="nav align-items-center">
        <button type="button" class="nav-link animate-underline px-0">
          <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
          <span class="animate-target">Reply</span>
        </button>
        <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
          <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
          29
        </button>
        <hr class="vr my-2 mx-3">
        <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
          <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
          5
        </button>
      </div>

      <!-- Reply -->
      <div class="ps-3 pb-2">
        <div class="d-flex align-items-center pt-3 pb-2 mb-1">
          <span class="badge bg-primary me-2">Reply</span>
          <span class="h6 mb-0 me-4">Cartzilla Company</span>
          <span class="text-body-secondary fs-sm">May 8, 2024</span>
        </div>
        <p class="fs-sm mb-0">Thank you for your feedback! We are glad that you were satisfied with your purchase :)</p>
      </div>
    </div>

#### Product review: Variant 2

Bessie Cooper
April 8, 2024

While the design of the chair is nice and it does add a touch of retro vibe to my space, I found the quality to be lacking. After just a few weeks of use, one of the legs started to wobble, and the seat isn't as comfortable as I had hoped. Disappointed with the durability. Additionally, the assembly process was a bit frustrating as some of the screws didn't align properly with the holes, requiring extra effort to secure them in place. Overall, while it looks good, I expected better quality for the price.

No, I don't recommend this product
Helpful?

    <!-- Product review -->
    <div class="border-top border-bottom py-4">
      <div class="row py-sm-2">
        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
          <div class="d-flex h6 mb-2">
            Bessie Cooper
            <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
          </div>
          <div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
          <div class="d-flex gap-1 fs-sm">
            <i class="ci-star-filled text-body-emphasis"></i>
            <i class="ci-star-filled text-body-emphasis"></i>
            <i class="ci-star text-body-tertiary opacity-75"></i>
            <i class="ci-star text-body-tertiary opacity-75"></i>
            <i class="ci-star text-body-tertiary opacity-75"></i>
          </div>
        </div>
        <div class="col-md-8 col-lg-9">
          <p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro vibe to my space, I found the quality to be lacking. After just a few weeks of use, one of the legs started to wobble, and the seat isn't as comfortable as I had hoped. Disappointed with the durability. Additionally, the assembly process was a bit frustrating as some of the screws didn't align properly with the holes, requiring extra effort to secure them in place. Overall, while it looks good, I expected better quality for the price.</p>
          <div class="d-sm-flex justify-content-between">
            <div class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
              <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
              No, I don't recommend this product
            </div>
            <div class="d-flex align-items-center gap-2">
              <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
              <button type="button" class="btn btn-sm btn-secondary">
                <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                3
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

#### Inside card: Variant 1

### Alexandra D.

A wonderful compact bag, holds a lot of things, good tailoring, smooth seams, strong fittings, good quality.

    <!-- Review inside card: Variant 1 -->
    <div class="card rounded-4 p-sm-2">
      <div class="card-body">
        <div class="d-flex align-items-center mb-3">
          <!-- Wrap the image with a "ratio" element to avoid content shifts on page load -->
          <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
            <img src="assets/img/home/fashion/v1/reviews/02.png" width="80" alt="Image">
          </div>
          <div class="ps-2 ms-1">
            <div class="d-flex gap-1 fs-xs pb-2 mb-1">
              <i class="ci-star-filled text-warning"></i>
              <i class="ci-star-filled text-warning"></i>
              <i class="ci-star-filled text-warning"></i>
              <i class="ci-star-filled text-warning"></i>
              <i class="ci-star-filled text-warning"></i>
            </div>
            <h3 class="h6 mb-0">Alexandra D.</h3>
          </div>
        </div>
        <p class="mb-0">A wonderful compact bag, holds a lot of things, good tailoring, smooth seams, strong fittings, good quality.</p>
      </div>
    </div>

#### Inside card: Variant 2

### Perfect for daily use!

I bought the metallic blue bottle, and it has quickly become my go-to for everything! It keeps my water cold all day, even during my long shifts at work. Absolutely love it 🤩

    <!-- Review inside card: Variant 2 -->
    <div class="card bg-transparent border-0 rounded-5 shadow overflow-hidden p-xl-2">
      <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
        <div class="d-flex gap-1 text-warning mb-3">
          <i class="ci-star-filled"></i>
          <i class="ci-star-filled"></i>
          <i class="ci-star-filled"></i>
          <i class="ci-star-filled"></i>
          <i class="ci-star-filled"></i>
        </div>
        <h3 class="h5 pb-2 mb-1">Perfect for daily use!</h3>
        <p class="mb-0">I bought the metallic blue bottle, and it has quickly become my go-to for everything! It keeps my water cold all day, even during my long shifts at work. Absolutely love it 🤩</p>
      </div>
      <div class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
        <!-- Wrap the image with a "ratio" element to avoid content shifts on page load -->
        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden" style="width: 44px">
          <img src="assets/img/home/single-product/reviews/ava01.jpg" alt="Avatar">
        </div>
        <div class="fs-sm ps-2 ms-1">
          <div class="fw-semibold text-dark-emphasis">Jenny Wilson</div>
          <div>Freshness Bottle</div>
        </div>
      </div>
      <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
      <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark" style="opacity: .08"></span>
    </div>

#### Rating breakdown

4.1
68 reviews
5
37
4
16
3
9
2
4
1
3

    <div class="row g-4">
    <div class="col-sm-5 col-md-3">

      <!-- Overall rating card -->
      <div class="d-flex flex-column align-items-center justify-content-center h-100 bg-body-tertiary rounded p-4">
        <div class="h1 pb-2 mb-1">4.1</div>
        <div class="hstack justify-content-center gap-1 fs-sm mb-2">
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star text-body-tertiary opacity-60"></i>
        </div>
        <div class="fs-sm">68 reviews</div>
      </div>
    </div>
    <div class="col-sm-7 col-md-9">

      <!-- Rating breakdown by quantity -->
      <div class="vstack gap-3">

        <!-- 5 stars -->
        <div class="hstack gap-2">
          <div class="hstack fs-sm gap-1">
            5<i class="ci-star-filled text-warning"></i>
          </div>
          <div class="progress w-100" role="progressbar" aria-label="Five stars" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
            <div class="progress-bar bg-warning rounded-pill" style="width: 54%"></div>
          </div>
          <div class="fs-sm text-nowrap text-end" style="width: 40px;">37</div>
        </div>

        <!-- 4 stars -->
        <div class="hstack gap-2">
          <div class="hstack fs-sm gap-1">
            4<i class="ci-star-filled text-warning"></i>
          </div>
          <div class="progress w-100" role="progressbar" aria-label="Four stars" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
            <div class="progress-bar bg-warning rounded-pill" style="width: 23.5%"></div>
          </div>
          <div class="fs-sm text-nowrap text-end" style="width: 40px;">16</div>
        </div>

        <!-- 3 stars -->
        <div class="hstack gap-2">
          <div class="hstack fs-sm gap-1">
            3<i class="ci-star-filled text-warning"></i>
          </div>
          <div class="progress w-100" role="progressbar" aria-label="Three stars" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
            <div class="progress-bar bg-warning rounded-pill" style="width: 13%"></div>
          </div>
          <div class="fs-sm text-nowrap text-end" style="width: 40px;">9</div>
        </div>

        <!-- 2 stars -->
        <div class="hstack gap-2">
          <div class="hstack fs-sm gap-1">
            2<i class="ci-star-filled text-warning"></i>
          </div>
          <div class="progress w-100" role="progressbar" aria-label="Two stars" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
            <div class="progress-bar bg-warning rounded-pill" style="width: 6%"></div>
          </div>
          <div class="fs-sm text-nowrap text-end" style="width: 40px;">4</div>
        </div>

        <!-- 1 star -->
        <div class="hstack gap-2">
          <div class="hstack fs-sm gap-1">
            1<i class="ci-star-filled text-warning"></i>
          </div>
          <div class="progress w-100" role="progressbar" aria-label="One star" aria-valuenow="3.5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
            <div class="progress-bar bg-warning rounded-pill" style="width: 3.5%"></div>
          </div>
          <div class="fs-sm text-nowrap text-end" style="width: 40px;">3</div>
        </div>
      </div>
    </div>
    </div>

Top