Skip to main content

Star Rating

A rating display — stars, hearts, circles or a bar — with an optional label and value/count, supporting half ratings. Tabs: Content, Design, Styling, Animations, Advanced.

Star Rating on the Page Builder canvas
💡 Web dev tip: a rating must be readable, not just visible

Five drawn stars mean nothing to a screen reader. Always express the value as text too — "4.5 out of 5" — so it is announced and understood. Only add Review or AggregateRating structured data for genuine customer reviews; faking it breaks Google's guidelines. Google: review snippet

Live demo​

▶ See the Star Rating live on the demos site — an interactive example you can click through.

Content​

Star Rating options panel — Content tab
  • Rating — slider from 0 to 10 in 0.5 steps (default 4.5); set it on the same scale as the "Out Of" value below.
  • Out Of — 5 (default) or 10.
  • Label — optional text before the symbols, e.g. "Excellent".
  • Show Value — Yes (default) or No — show "4.5/5" after the symbols.
  • Count Text — optional text, e.g. "based on 220 reviews".

Design​

Star Rating options panel — Design tab
  • Symbol — image-picker of symbols (star, hearts, circles, bar, etc.); default star.
  • Size — Small, Medium (default), Large, or Extra large.
  • Alignment — left (default), center, or right.

Styling​

Star Rating options panel — Styling tab
  • Filled Color — color of the filled symbols.
  • Empty Color — color of the empty symbols.
  • Label / Value Color — color of the label and value text.
  • Font Size — font-size preset for the rating.
  • Margin & Padding — spacing control for the block.

Animations​

Standard entrance-animation controls (effect, duration, delay, offset).

Advanced​

Custom CSS class/ID, responsive visibility toggles, custom attributes, and margin/padding.