Testimonial Component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut culpa reprehenderit maxime. Sint deserunt quaerat ullam, harum laborum voluptas accusamus!

Name

Job title

Component Details

Testimonial displays customer reviews or feedback to build trust and credibility.


        <div class="c-testimonial">
          <blockquote>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span class="c-testimonial__highlight">Aut culpa reprehenderit maxime.</span> Sint deserunt quaerat ullam, harum laborum voluptas accusamus!</p>
            <cite class="c-testimonial__cite">
              <img src="https://i.pravatar.cc/50" alt="Author Portrait">
              <div class="c-testimonial__author-details">
                <p>Name</p>
                <p>Job title</p>
              </div>
            </cite>
          </blockquote>
        </div>


        .c-testimonial blockquote > p {
          font-style: italic;
          font-size: 20px;
          line-height: 1.2;
          position: relative;
        }
        
        .c-testimonial blockquote > p::before {
          content: '“';
          display: inline-flex;
          margin-right: 3px;
        }
        
        .c-testimonial blockquote > p::after {
          content: '”';
          display: inline-flex;
          margin-left: 3px;
        }
        
        .c-testimonial__highlight {
          background-color: purple;
        }
        
        .c-testimonial__cite {
          display: flex;
          align-items: center;
          column-gap: 10px;
          font-style: italic;
          margin-top: 10px;
          font-size: 16px;
          color: #a0aec0;
        }
        
        .c-testimonial__cite img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        
        .c-testimonial__author-details p {
          line-height: 1.1;
        }


        .c-testimonial {
          blockquote {
            > p {
              font-style: italic;
              font-size: 20px;
              line-height: 1.2;
              position: relative;
              
              &::before {
                content: '“';
                display: inline-flex;
                margin-right: 3px;
              }
              
              &::after {
                content: '”';
                display: inline-flex;
                margin-left: 3px;
              }
            } 
          }
          
          &__highlight {
            background-color: purple;
          }
          
          &__cite {
            display: flex;
            align-items: center;
            column-gap: 10px;
            font-style: italic;
            margin-top: 10px;
            font-size: 16px;
            color: #a0aec0;
            
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }        
          }
          
          &__author-details {
            p {
              line-height: 1.1;
            }
          }
        }