Testimonials / reviews

<!-- Default testimonial -->
<blockquote class="blockquote">
  <p class="pb-2 lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non. Congue tortor in tot euismod vulputate etiam eros. Vel accumsan at elit neque, ipsum.</p>
  <footer class="media align-items-center">
    <img class="mr-3 rounded-circle" src="path-to-image" width="72" alt="Author">
    <div class="media-body">
      <h3 class="h6 mb-0">Courtney Alexander</h3>
      <span class="font-size-sm text-muted">Position, Company</span>
    </div>
  </footer>
</blockquote>

<!-- Card testimonial -->
<div class="blockquote-card card border-0 box-shadow-sm">
  <div class="card-body mt-sm-4 mx-xl-5 mx-sm-4 pb-0">
    <blockquote class="blockquote">
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non.</p>
    </blockquote>
  </div>
  <div class="card-footer mb-sm-4 mx-xl-5 mx-sm-4 pt-0 border-0 media align-items-center">
    <img class="mr-3 rounded-circle" src="path-to-image" width="72" alt="Author">
    <div class="media-body">
      <h3 class="h6 mb-0">Eleanor Pena</h3>
      <span class="font-size-sm text-muted">Position, Course</span>
    </div>
  </div>
</div>

<!-- Inside carousel: Style 1 -->
<div class="cs-carousel cs-nav-outside cs-controls-outside">
  <div class="cs-carousel-inner" data-carousel-options='{
    "autoHeight": true
  }'>

    <!-- Carousel item -->
    <div class="pb-md-5 px-md-4">
      <div class="blockquote-card card border-0 box-shadow-sm mb-md-4">
        <div class="card-body mt-sm-4 mx-xl-5 mx-sm-4 pb-0">
          <blockquote class="blockquote">
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non. Congue tortor in tot euismod vulputate etiam eros. Vel accumsan at elit neque, ipsum.</p>
          </blockquote>
        </div>
        <div class="card-footer mb-sm-4 mx-xl-5 mx-sm-4 pt-0 border-0 media align-items-center">
          <img class="mr-3 rounded-circle" src="path-to-image" width="72" alt="Author">
          <div class="media-body">
            <h3 class="h6 mb-0">Courtney Alexander</h3>
            <span class="font-size-sm text-muted">Position, Company </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Carousel item -->
    <div class="pb-md-5 px-md-4">
      <div class="blockquote-card card border-0 box-shadow-sm mb-md-4">
        <div class="card-body mt-sm-4 mx-xl-5 mx-sm-4 pb-0">
          <blockquote class="blockquote">
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non.</p>
          </blockquote>
        </div>
        <div class="card-footer mb-sm-4 mx-xl-5 mx-sm-4 pt-0 border-0 media align-items-center">
          <img class="mr-3 rounded-circle" src="path-to-image" width="72" alt="Author">
          <div class="media-body">
            <h3 class="h6 mb-0">Eleanor Pena</h3>
            <span class="font-size-sm text-muted">Position, Course</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Inside carousel: Style 2 -->
<div class="cs-carousel">
  <div class="cs-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "nav": false,
    "controlsContainer": "#tns-custom-controls",
    "autoHeight": true
  }'>

    <!-- Carousel item -->
    <blockquote>
      <img class="mb-4 rounded-circle" src="path-to-image" width="72" alt="Author">
      <p class="pb-2 lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non. Congue tortor in tot euismod vulputate etiam eros. Vel accumsan at elit neque, ipsum.</p>
      <footer>
        <h3 class="h6 mb-0">Courtney Alexander</h3>
        <span class="font-size-sm text-muted">Position, Company</span>
      </footer>
    </blockquote>

    <!-- Carousel item -->
    <blockquote>
      <img class="mb-4 rounded-circle" src="path-to-image" width="72" alt="Author">
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non.</p>
      <footer>
        <h3 class="h6 mb-0">Eleanor Pena</h3>
        <span class="font-size-sm text-muted">Position, Course</span>
      </footer>
    </blockquote>
  </div>
</div>

<!-- Custom controls (prev/next) -->
<div class="tns-custom-controls cs-controls-inverse mt-n5" id="tns-custom-controls" tabindex="0">
  <button class="mt-n2" type="button" data-controls="prev" tabindex="-1">
    <i class="cxi-arrow-left"></i>
  </button>
  <button class="mt-n2" type="button" data-controls="next" tabindex="-1">
    <i class="cxi-arrow-right"></i>
  </button>
</div>

<!-- Product review -->
<div class="mb-4 pb-4 border-bottom">
  <div class="row">
    <div class="col-md-3 col-sm-4 mb-sm-0 mb-3">
      <h3 class="mb-2 font-size-lg">Annette Black</h3>
      <span class="d-block mb-3 font-size-sm text-muted">1 day ago</span>
      <div class="mt-n1 star-rating">
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star-filled active"></i>
        <i class="sr-star cxi-star"></i>
      </div>
    </div>
    <div class="col">
      <p class="mb-3">
        <a class="mr-1 font-weight-bold text-decoration-none" href="#">@Devon Lane</a>
        Egestas fermentum natoque sollicitudin mauris. Facilisis praesent urna sed rhoncus quis pharetra pellentesque erat sagittis.
      </p>
      <div class="d-flex justify-content-between">
        <a class="nav-link p-0 font-size-sm" href="#">
          <i class="cxi-chat mr-2 font-size-base align-middle mt-n1"></i>
          Reply
        </a>
        <div class="d-flex">
          <a class="nav-link mr-3 p-0 font-size-sm" href="#">
            <i class="cxi-like mr-2 font-size-base align-middle mt-n1 text-success"></i>
            2
          </a>
          <a class="nav-link p-0 font-size-sm" href="#">
            <i class="cxi-dislike mr-2 font-size-base align-middle mt-n1 text-danger"></i>
            1
          </a>
        </div>
      </div>
    </div>
  </div>
</div>