Star Rating

Star Rating displays a rating using stars or another chosen icon. Use it to present a known rating alongside text explaining its source and scale.

Add and configure Star Rating

1. Click Add, choose Star Rating, and place it in the container.
2. Set Content > Components > Stars and Rating.
3. Choose Icon Type and Custom Icon if applicable.
4. Enable Show Label and enter Label Text when a textual explanation is needed.
5. Configure Design > Stars, Label, and Spacing.
6. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Components

Setting	Purpose and options	Behavior
Stars	One, Two, Three, Four, Five, Six, Seven, Eight, Nine, Ten.	Shared
Rating	Set rating. Range: 0–10.	Shared
Icon Type	Font Awesome, Icon Moon, Custom.	Shared
Custom Icon	Icon. When: Icon Type = Custom.	Shared
Show Label	On/off.	Shared
Label Text	Enter the label text. When: Show Label is set.	Shared

Design > Stars

Setting	Purpose and options	Behavior
Size	Size and unit.	Responsive
Gap	Space between items.	Responsive
Stars Color	Color or supported fill.	Shared
Unmarked Color	Color or supported fill.	Shared

Design > Label

Shown when Show Label is set.

Setting	Purpose and options	Behavior
Label Typography	typography controls.	See linked controls
Label Position	Before, After.	Shared
Vertical Layout	Breakpoint.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
Wrapper	spacing controls.	See linked controls
Label Spacing	Label spacing and unit.	Responsive

Troubleshooting