Easy-to-Use & Customizable 

Star rating Widget 

 

bg-tertiary hs-fullwidth has-no-gutter

style01 



<!-- *** Matrix add-ons Star rating *** -->
<div class="star-rating">
    <div class="back-stars size-20">
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="front-stars" style="width: 70%">
            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>
        </div>
    </div>
</div>

style02 


<!-- *** Matrix add-ons Star rating *** -->
<div class="star-rating">
    <div class="back-stars size-30">
        <div class="fa fa-star-o" aria-hidden="true">
        </div>
        <div class="fa fa-star-o" aria-hidden="true">
        </div>
        <div class="fa fa-star-o" aria-hidden="true">
        </div>
        <div class="fa fa-star-o" aria-hidden="true">
        </div>
        <div class="fa fa-star-o" aria-hidden="true">
        </div>

        <div class="front-stars" style="width: 64%">
            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>
        </div>
    </div>
</div>

style03 


<!-- *** Matrix add-ons Star rating *** -->
<div class="is-matrix bg-grey add-10 bg-round" style="max-width:120px;">
<div class="star-rating">
    <div class="back-stars size-20">
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>
        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="front-stars" style="width: 62%">
            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>
        </div>
    </div>
</div>
Matrix Themes


Stand out with professional Jimdo website

Premium 24/7 Support · Lifetime Updates




has-right-col-border

Try Matrix Builder
draggable-logo

Global colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
Template configurations
 
has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
snip-nav --line01
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

 

#cc-inner .my-class {

  color:#f0f0f0;

}

 


Note: All changes made here will be applied to your entire website.
is-switcher