Component advanced/070

Component ID: advanced/070

A 5-symbol rating display using stars or hearts. Symbols fade in one at a time with staggered timing. Filled symbols show the rating value, unfilled symbols show as a different color. Supports separate styling for 'on' and 'off' states. Perfect for product reviews, testimonials, or any rating visualization.

Section	Interactive or data-driven elements: buttons, counters, ratings, images, tables
Animation	Each symbol fades in sequentially (500ms each, 300ms stagger between symbols).
Intro duration	5 s

Preview

Element schema

Minimal shape of a advanced/070 component element:

{
    "type": "component",
    "component": "advanced/070",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`rating`

Rating display configuration.

Property	Type	Default	Description
`value`	integer	`5`	Rating value (0-5).
`symbol`	string (enum)	`star`	Symbol type. Values: `star`, `heart`
`size`	string	`3vw`	Symbol size.
`color`	string	`gold`	Filled symbol color.
`stroke`	string	—	Filled symbol stroke color.
`drop-shadow`	string	—	Shadow for filled symbols.
`off-color`	string	`transparent`	Unfilled symbol color.
`off-stroke`	string	—	Unfilled symbol stroke color.
`off-drop-shadow`	string	—	Shadow for unfilled symbols.
`vertical-align`	string (enum)	`center`	Vertical position. Values: `top`, `center`, `bottom`
`horizontal-align`	string (enum)	`center`	Horizontal position. Values: `left`, `center`, `right`