Need to show a user review or quote someone?
Easily add quotes or user reviews to your emails.
We've included the following variations:
- Twitter-style
- Left With Quote
- Split With Border
- 2 Columns Boxed
- Centered With Avatar
Twitter-style
Quote a user from Twitter with this testimonial section that closely resembles the tweet card design.
Left With Quote
Simple, left-aligned single column testimonial, with a quote icon and author name.
Split With Border
A simple, typography focused and left aligned testimonial, with user name, a separating border, and a quote image that you can customise to suit your needs. The border is removed on mobile through the borderless-sm class.
2 Columns Boxed
Add a couple of user reviews, with a two column layout. Each box has its own user avatar image and background colour, which you can of course customise. On mobile, the columns will stack.
Centered With Avatar
Single column, centered quote with user avatar and user name at the bottom.
Customisation
Text
Font size, colour, weight, spacing, all can be changed through inline CSS.
Images
Simply change the src="" and width="" of each image. If you want use retina images, make sure your own image is twice the pixel size of the placeholder.
Top & Bottom Spacing
Change the line-height: value on the <div class="spacer":
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>For spacing on mobile, we generally use the py-sm-8 class, that sets the spacer to be 16px high. You can change it to one of the other mobile spacing classes in Acorn. Learn more about spacers in Acorn.