Testimonial

Testimonials are a great way to share what your clients are saying about you. We provide testimonials in three sizes, which each have a slightly different style — testimonial-sm, testimonial-md and testimonial-lg.

Small Testimonials

The small testimonial can be neatly tucked into a sidebar or small aside of your website. Create an element with both classes fs-testimonial and testimonial-sm.

    

        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    

    

        

            
        
        

            
Erik Allen
            Founder, Pacific Revival
        
    

And don't worry if you're not able to get an avatar for each of your testimonial authors; the block will display just fine without one.

    

        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    

    

        

            
Erik Allen
            Founder, Pacific Revival
        
    

For you HTML5 standards enthusiasts, feel free to also use a <blockquote> for the .testimonial-text element with any testimonial. The only difference is that this will then apply the blockquote text styling to the testimonial text.

    

        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    

    

        

            
        
        

            
Erik Allen
            Founder, Pacific Revival
        
    

Medium Testimonials

If you're looking for a more promiment testimonial, with larger font and a bit more pop, try creating a .fs-testimonial.testimonial-md element.

    

        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim.
    

    

        

            
        
        

            
Erik Allen
            Founder, Pacific Revival
        
    

Custom Colors

Because small and medium testimonials have a background around the quoted text, you may want to customize the color.

If you're using Sass, you can customize the variable $fs-testimonial-bg-color.

$fs-testimonial-bg-color: #000;

Or, if you're working with static CSS overrides, here's a snippet you can start with.

.fs-testimonial.testimonial-sm .testimonial-text,
.fs-testimonial.testimonial-md .testimonial-text {
    background-color: #000;
    color: #fff;
}
.fs-testimonial.testimonial-sm .testimonial-text:before {
    border-top-color: #000;
}
.fs-testimonial.testimonial-md .testimonial-text:before {
    border-right-color: #000;
}

If you're looking to dynamically customize the color of a testimonial, things get a little messier. — This might be useful if you're dynamically outputting a testimonial from a CMS or something with user-selected colors.

In addition to adding the inline background color, we also use the <span class="testimonial-arrow"></span> instead of relying on the default :before styling so that we can add inline styling to the little arrow for the color.

Also note below the uses of the text-light class to easily invert the text for a darker background color.

    

        
        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    

    

        

            
        
        

            
Erik Allen
            Founder, Pacific Revival
        
    

    

        
        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    

    

        

            
        
        

            
Erik Allen
            Founder, Pacific Revival
        
    

Large Testimonials

Finally, if you're looking for something to really stand out, like maybe for a section of your homepage or somewhere else really prominent, try using the .fs-testimonial.testimonial-lg element.

    

        
Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    

    

        

            
        
        

            
Erik Allen
            Founder, Pacific Revival
        
    

Now by default, this may look a bit bare, but that's so you can place it within another section that you've drawn attention to with a background and spacing. For example, below we've moved the large testimonial into a section with some padding and a background color.

    

        ...