Review

Review/comment component that supports child reviews/comments.

Sophie Casey,

Cute, but too small

Shall good midst can't. Have fill own his multiply the divided. Thing great. Of heaven whose signs.

Was this review helpful?

Comments (1)

Comment
William Stokes,

Very good

Made face lights yielding forth created for image behold blessed seas.

Was this review helpful?

Comments (0)

Comment
<div class="review">

  <!-- Body -->
  <div class="review-body">
    <div class="row">
      <div class="col-12 col-md-auto">

        <!-- Avatar -->
        <div class="avatar avatar-xxl mb-6 mb-md-0">
          <span class="avatar-title rounded-circle">
            <i class="fa fa-user"></i>
          </span>
        </div>

      </div>
      <div class="col-12 col-md">

        <!-- Header -->
        <div class="row mb-6">
          <div class="col-12">

            <!-- Rating -->
            <div class="rating font-size-sm text-dark" data-value="3">
              <div class="rating-item">
                <i class="fas fa-star"></i>
              </div>
              <div class="rating-item">
                <i class="fas fa-star"></i>
              </div>
              <div class="rating-item">
                <i class="fas fa-star"></i>
              </div>
              <div class="rating-item">
                <i class="fas fa-star"></i>
              </div>
              <div class="rating-item">
                <i class="fas fa-star"></i>
              </div>
            </div>

          </div>
          <div class="col-12">

            <!-- Time -->
            <span class="font-size-xs text-muted">
              Sophie Casey, <time datetime="2019-07-07">07 Jul 2019</time>
            </span>

          </div>
        </div>

        <!-- Title -->
        <p class="mb-2 font-size-lg font-weight-bold">
          Cute, but too small
        </p>

        <!-- Text -->
        <p class="text-gray-500">
          Shall good midst can't. Have fill own his multiply the divided. Thing great. Of heaven whose signs.
        </p>

        <!-- Footer -->
        <div class="row align-items-center">
          <div class="col-auto d-none d-lg-block">

            <!-- Text -->
            <p class="mb-0 font-size-sm">Was this review helpful?</p>

          </div>
          <div class="col-auto mr-auto">

            <!-- Rate -->
            <div class="rate">
              <a class="rate-item" data-toggle="vote" data-count="2" href="#" role="button">
                <i class="fe fe-thumbs-up"></i>
              </a>
              <a class="rate-item" data-toggle="vote" data-count="1" href="#" role="button">
                <i class="fe fe-thumbs-down"></i>
              </a>
            </div>

          </div>
          <div class="col-auto d-none d-lg-block">

            <!-- Text -->
            <p class="mb-0 font-size-sm">Comments (1)</p>

          </div>
          <div class="col-auto">

            <!-- Button -->
            <a class="btn btn-xs btn-outline-border" href="#!">
              Comment
            </a>

          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- Child review -->
  <div class="review review-child">
    <div class="review-body">

      <!-- Content -->
      <div class="row">
        <div class="col-12 col-md-auto">

          <!-- Avatar -->
          <div class="avatar avatar-xxl mb-6 mb-md-0">
            <span class="avatar-title rounded-circle">
              <i class="fa fa-user"></i>
            </span>
          </div>

        </div>
        <div class="col-12 col-md">

          <!-- Header -->
          <div class="row mb-6">
            <div class="col-12">

              <!-- Rating -->
              <div class="rating font-size-sm text-dark" data-value="4">
                <div class="rating-item">
                  <i class="fas fa-star"></i>
                </div>
                <div class="rating-item">
                  <i class="fas fa-star"></i>
                </div>
                <div class="rating-item">
                  <i class="fas fa-star"></i>
                </div>
                <div class="rating-item">
                  <i class="fas fa-star"></i>
                </div>
                <div class="rating-item">
                  <i class="fas fa-star"></i>
                </div>
              </div>

            </div>
            <div class="col-12">

              <!-- Time -->
              <span class="font-size-xs text-muted">
                William Stokes, <time datetime="2019-07-14">14 Jul 2019</time>
              </span>

            </div>
          </div>

          <!-- Title -->
          <p class="mb-2 font-size-lg font-weight-bold">
            Very good
          </p>

          <!-- Text -->
          <p class="text-gray-500">
            Made face lights yielding forth created for image behold blessed seas.
          </p>

          <!-- Footer -->
          <div class="row align-items-center">
            <div class="col-auto d-none d-lg-block">

              <!-- Text -->
              <p class="mb-0 font-size-sm">Was this review helpful?</p>

            </div>
            <div class="col-auto mr-auto">

              <!-- Rate -->
              <div class="rate">
                <a class="rate-item" data-toggle="vote" data-count="7" href="#" role="button">
                  <i class="fe fe-thumbs-up"></i>
                </a>
                <a class="rate-item" data-toggle="vote" data-count="0" href="#" role="button">
                  <i class="fe fe-thumbs-down"></i>
                </a>
              </div>

            </div>
            <div class="col-auto d-none d-lg-block">

              <!-- Text -->
              <p class="mb-0 font-size-sm">Comments (0)</p>

            </div>
            <div class="col-auto">

              <!-- Button -->
              <a class="btn btn-xs btn-outline-border" href="#!">
                Comment
              </a>

            </div>
          </div>

        </div>
      </div>

    </div>
  </div>

</div>