Vertical Testimonial Block

By Rafi

F6
#
quote testimonial content flexbox
How do I use This?

A testimonial block to tell your site visitors how awesome you are.

HTML
<div class="testimonial-block-vertical">
  <div class="testimonial-block-vertical-quote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
  </div>
  <div class="testimonial-block-vertical-person">
    <img class="testimonial-block-vertical-avatar" src="https://placehold.it/60" alt="" />
    <div>
      <p class="testimonial-block-vertical-name">John Doe</p>
      <p class="testimonial-block-vertical-info">Important person, some Company</p>
    </div>
  </div>
</div>


$testimonial-light-blue: rgba($primary-color, 0.25);
$testimonial-block-vertical-bg: $testimonial-light-blue;


.testimonial-block-vertical-quote {
  background: $testimonial-block-vertical-bg;
  padding: $global-padding;
  border-radius: $global-radius;
  margin-bottom: 1.875rem;
  position: relative;

  p {
    margin-bottom: 0;
  }

  &::after {
    content: '';
    bottom: -1.25rem;
    left: 2.25rem;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 1.25rem 1.125rem 0 1.125rem;
    border-color: $testimonial-block-vertical-bg transparent transparent transparent;
    position: absolute;
  }
}

.testimonial-block-vertical-person {
  display: flex;
  margin-left: 1.65rem;
  align-items: center;
}

.testimonial-block-vertical-avatar {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.testimonial-block-vertical-name {
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0;
  margin-left: 0.65rem;
}

.testimonial-block-vertical-info {
  text-transform: uppercase;
  font-size: 14px;
  color: $dark-gray;
  margin-bottom: 0;
  margin-left: 0.65rem;
}



.testimonial-block-vertical-quote {
  background: rgba(23, 121, 186, 0.25);
  padding: 1rem;
  border-radius: 0;
  margin-bottom: 1.875rem;
  position: relative;
}

.testimonial-block-vertical-quote p {
  margin-bottom: 0;
}

.testimonial-block-vertical-quote::after {
  content: '';
  bottom: -1.25rem;
  left: 2.25rem;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 1.25rem 1.125rem 0 1.125rem;
  border-color: rgba(23, 121, 186, 0.25) transparent transparent transparent;
  position: absolute;
}

.testimonial-block-vertical-person {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 1.65rem;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.testimonial-block-vertical-avatar {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.testimonial-block-vertical-name {
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0;
  margin-left: 0.65rem;
}

.testimonial-block-vertical-info {
  text-transform: uppercase;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 0;
  margin-left: 0.65rem;
}
JS

Similar Building Blocks

containers

Marketing Site Footer

F6
by Rafi
containers

CSS Masonry Grid

F6
by Rafi
containers

Marketing Site Content Section

F6
by Rafi