Rating Stars Block
The Rating Stars block displays a five-star rating using filled and unfilled star icons. You can set ratings in half-star increments (for example, 4.5 out of 5), allowing for more precise review scores.
It’s commonly used to visually represent reviews, testimonials, or scored feedback, and is typically paired with supporting content such as quotes, reviewer names, or product details.
Table of Contents
Why use the rating stars block
Use the Rating Stars block when you want to:
- Display a customer or client review score
- Highlight product or service ratings
- Visually reinforce testimonials
- Show aggregate ratings from platforms like Google or similar review sources
The block provides a clear, familiar visual indicator that helps readers quickly understand the strength of a review or endorsement.
Rating Stars are most effective when paired with supporting context — such as written testimonials or reviewer information.
How to use the block
Start by adding the Rating Stars block to the page. Learn how to add blocks.
Once the block is added, editors typically:
- Enter a numeric Rating value
- Adjust the Size to fit the layout
- Add related content (such as quotes or reviewer names) nearby
This block is often used within layouts like Columns or Patterns. For example, you might use three Columns to display three customer reviews, each with its own Rating Stars block.
Block toolbar
The Rating Stars block does not include settings in the block toolbar.
All configuration options are managed in the block settings sidebar.
Block settings
Block settings appear in the right sidebar while the Rating Stars block is selected.
Rating
Enter a number between 0 and 5 to define how many stars are filled.
- Whole numbers (for example, 4) fill full stars
- Half values (for example, 4.5) fill half stars
The rating updates automatically based on the value entered.
Size
Set a pixel value to control the overall width of the block and the size of the star icons. A width between 100px and 200px is common, depending on the layout.
When using multiple Rating Stars blocks in the same section, it’s recommended to use the same Size value for visual consistency.
Block styles
In the block settings sidebar under the Styles tab:
Margin
Adjust the space above and below the Rating Stars block.
Tips for editors
Keep ratings consistent within a section
If displaying multiple reviews together, use the same Size setting so the star icons appear uniform.
Pair stars with context
Star ratings work best when supported by written testimonials, reviewer names, or source references. Avoid using star ratings without context.