`review` element

One or more customer reviews: stars, quote and author.

Renders

<figure> with rating, <blockquote> and <figcaption> per review

Required

rating/content/author (or binds), or items.

Native apps

Web, and server-driven native apps

Syntax

review element

{ "type": "review" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`author`	`string`
`items`	`array of item`
`rating`	`number`
`content`	`string`	literal text, or an expression starting with = ("=product.name")
`binds`	`object {name: string}`	bind attributes: {"source": "image", "target": "slug"}

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

review example

{
  "type": "review",
  "items": [
    { "rating": 5, "content": "Beautifully made.", "author": "Maya, Bristol" },
    { "rating": 4, "content": "Lovely, slow delivery.", "author": "Priya" }
  ]
}

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <figure class="iwc-review i4ca7b9e4">
    <div class="iwc-review-item">
      <span class="iwc-stars" role="img" aria-label="5.0 out of 5">★★★★★</span>
      <blockquote class="iwc-text">
        Beautifully made.
      </blockquote>
      <figcaption>
        — Maya, Bristol
      </figcaption>
    </div>
    <div class="iwc-review-item">
      <span class="iwc-stars" role="img" aria-label="4.0 out of 5">★★★★☆</span>
      <blockquote class="iwc-text">
        Lovely, slow delivery.
      </blockquote>
      <figcaption>
        — Priya
      </figcaption>
    </div>
  </figure>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.