{
  "name": "rating-stars-review-summary",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Customer reviews</text-ui>\n      </header>\n      <section>\n        <col-ui gap=\"4\">\n          <row-ui gap=\"4\" align=\"center\">\n            <col-ui gap=\"0\" align=\"center\">\n              <text-ui variant=\"display\" size=\"md\">4.6</text-ui>\n              <rating-ui value=\"4.5\" allow-half readonly></rating-ui>\n              <text-ui size=\"sm\" color=\"subtle\">1,284 reviews</text-ui>\n            </col-ui>\n            <col-ui gap=\"2\" style=\"flex: 1\">\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">5★</text-ui>\n                <progress-ui value=\"72\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">4★</text-ui>\n                <progress-ui value=\"18\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">3★</text-ui>\n                <progress-ui value=\"6\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">2★</text-ui>\n                <progress-ui value=\"3\" total=\"100\"></progress-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui size=\"sm\" color=\"subtle\">1★</text-ui>\n                <progress-ui value=\"1\" total=\"100\"></progress-ui>\n              </row-ui>\n            </col-ui>\n          </row-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
  "metadata": {
    "domain": "display",
    "description": "Rating review summary — a large average score beside a read-only star rating and total-review count, above a breakdown of star-level bars (5★ down to 1★) showing how many reviews fell at each level. The 'customer reviews / ratings overview' header on a product or listing page.",
    "keywords": [
      "rating",
      "stars",
      "review",
      "summary",
      "average",
      "score",
      "reviews",
      "count",
      "breakdown",
      "distribution",
      "feedback",
      "testimonials",
      "product",
      "ratings",
      "five",
      "star",
      "out",
      "of",
      "customer",
      "reviews",
      "overall",
      "rating",
      "bars",
      "histogram",
      "star",
      "levels",
      "review",
      "score",
      "reviews",
      "overview",
      "ratings",
      "panel"
    ]
  },
  "captured_at": "2026-06-10T19:45:40.486Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Customer reviews"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "size": "md",
      "variant": "display",
      "textContent": "4.6"
    },
    {
      "id": "rating",
      "component": "Rating",
      "readonly": true,
      "value": 4.5
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "1,284 reviews"
    },
    {
      "id": "column-2",
      "component": "Column",
      "align": "center",
      "gap": "0",
      "children": [
        "text-2",
        "rating",
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "5★"
    },
    {
      "id": "progress",
      "component": "Progress",
      "value": 72
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "text-4",
        "progress"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "4★"
    },
    {
      "id": "progress-2",
      "component": "Progress",
      "value": 18
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "text-5",
        "progress-2"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "3★"
    },
    {
      "id": "progress-3",
      "component": "Progress",
      "value": 6
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "text-6",
        "progress-3"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "2★"
    },
    {
      "id": "progress-4",
      "component": "Progress",
      "value": 3
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "text-7",
        "progress-4"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "1★"
    },
    {
      "id": "progress-5",
      "component": "Progress",
      "value": 1
    },
    {
      "id": "row-6",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "text-8",
        "progress-5"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "2",
      "children": [
        "row-2",
        "row-3",
        "row-4",
        "row-5",
        "row-6"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "4",
      "children": [
        "column-2",
        "column-3"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "row"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "card"
      ]
    }
  ]
}