Star rating
Display a read-only star score with adjustable size and colour.
Code name: Rating · Category: Text
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a rating only when you have a real score to display. For ratings connected to approved customer reviews, use the Testimonial wall.
In the editor
- Enter the score from your verified source.
- Choose star size and colour.
- Provide nearby context explaining what the rating represents.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Rating rating={4.5} size="medium" />Behaviour and limitations
- This is a display block, not a review-submission form.
- The editor range is 0–5 with half-star steps. A number alone does not establish a verified review rating.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
rating | number | 4.5 (renderer) | Rating Score. See the usage notes for this block. |
size | "small", "medium", "large" | "medium" (renderer) | Size. See the usage notes for this block. |
starColor | string | Not declared here | Star Color. See the usage notes for this block. |
align | "left", "center", "right" | "center" (editor only) | Align. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
