Testimonials

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.

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

For you hardcore 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.

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

You may have noticed the above testimonial has a light background because we added the class bg-light to the .testimonial-text element within. You must add a background color class, but it can be any of Front Street's background color classes.

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

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

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

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

...
    ...

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.

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

And just like with small testimonials, you can add any background color class to the .testimonial-text element of your medium testimonial.

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

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

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

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

...
    ...

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.

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

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 red background.

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

...