Testimonial: Cards with Star Ratings

Scroll to shortcode

Customer love

We boast an average rating of 4.8/5

"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi."

Jonathan Wilson / New York

"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."

Adam Pearce / Los Angeles

"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."

Sally Robinson / Minnesota

Shortcode

[section label="*Testimonial: Cards with Star Ratings" bg_color="rgb(248, 246, 244)" padding="66px" padding__md="42px" class="cards-star-ratings"]
[gap]
[row width="custom"]
[col span__sm="12" span__md="12" margin="0px 0px 42px 0px" margin__md="0px 0px 18px 0px"]
[row_inner style="collapse" width="custom" custom_width="506px" h_align="center"]
[col_inner span__sm="12" align="center"]
<h3 class="heading">Customer love</h3>
<p class="lead no-margin">We boast an average rating of 4.8/5</p>
[/col_inner]
[/row_inner]
[/col]
[col span="4" span__sm="12" span__md="12"]
[row_inner style="collapse" width="custom" custom_width="506px"]
[col_inner span__sm="12" padding="36px 36px 36px 36px" padding__sm="24px 24px 24px 24px" bg_color="rgb(255, 255, 255)" bg_radius="8" border="1px 1px 1px 1px" border_radius="8" border_color="rgb(235, 235, 236)"]
[testimonial name="Jonathan Wilson" company="New York"]
<p class="lead">&#8220;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.&#8221;</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[col span="4" span__sm="12" span__md="12"]
[row_inner style="collapse" width="custom" custom_width="506px"]
[col_inner span__sm="12" padding="36px 36px 36px 36px" padding__sm="24px 24px 24px 24px" bg_color="rgb(255, 255, 255)" bg_radius="8" border="1px 1px 1px 1px" border_radius="8" border_color="rgb(235, 235, 236)"]
[testimonial name="Adam Pearce" company="Los Angeles"]
<p class="lead">&#8220;Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.&#8221;</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[col span="4" span__sm="12" span__md="12"]
[row_inner style="collapse" width="custom" custom_width="506px"]
[col_inner span__sm="12" padding="36px 36px 36px 36px" padding__sm="24px 24px 24px 24px" bg_color="rgb(255, 255, 255)" bg_radius="8" border="1px 1px 1px 1px" border_radius="8" border_color="rgb(235, 235, 236)"]
[testimonial name="Sally Robinson" company="Minnesota"]
<p class="lead">&#8220;Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.&#8221;</p>
[/testimonial]
[/col_inner]
[/row_inner]
[/col]
[/row]
[/section]

CSS

/*---------- Testimonial: Cards with Star Ratings ----------*/
.cards-star-ratings .star-rating span:before {
  color: #f7c06e; /* Change star rating color */
}
.cards-star-ratings .star-rating {
  font-size: 24px;
  margin: 0 0 18px;
}
.cards-star-ratings h3.heading {
  font-size: 300%; /* 48px */
  line-height: 1.1;
}
.cards-star-ratings p.lead {
  font-style: normal;
  line-height: 1.3;
}
@media screen and (max-width:549px) {
  .cards-star-ratings p.lead {
    font-size: 16px;
    line-height: 1.6;
  }
  .cards-star-ratings h3.heading {
    font-size: 200%; /* 32px */
    line-height: 1.2;
  }
}

How to use Flatresources

Using Flatresources with your Flatsome website is easy as a breeze.

First, copy the provided Shortcode and paste it to the text page editor or directly to the UX Builder.

1. Copy and paste the Shortcode

Copying the Shortcode
Pasting the Shortcode using UX Builder import function
Pasting the Shortcode to the page text editor

2. Add the custom CSS code

Second, copy the CSS code (if provided) and paste it into your project to achieve the desired appearance.

There are multiple methods of adding and updating CSS code in WordPress, so let's look at each one of them.

Using a plugin (Simple Custom CSS and JS PRO)

This is our preferred method because it allows you to create multiple stylesheets to keep things neat and tidy. If you upgrade to the paid license, you will be able to apply the CSS code only to selected URLs, keep track of revisions, and much more.

Adding CSS using the Simple Custom CSS and JS plugin
WordPress Additional CSS

Appearance → Customize → Additional CSS

Adding CSS using the WordPress Additional CSS
Flatsome Custom CSS

Flatsome → Advanced → Custom CSS

Adding CSS using Flatsome Custom CSS
Theme style.css

Appearance → Theme Editor → style.css

Adding CSS using theme Stylesheet