{
  "name": "order-confirmation-success-card",
  "kind": "block",
  "primary": "card-ui",
  "page": "/playgrounds/composed-flow/app/composed-flow.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui\n          id=\"success-card\"\n          style=\"grid-column: 1 / -1\">\n          <header slot=\"heading\">\n            <span slot=\"icon\"><icon-ui name=\"check-circle\"></icon-ui></span>\n            Order confirmed\n          </header>\n          <section>\n            <col-ui gap=\"4\">\n              <row-ui gap=\"4\" align=\"center\" wrap>\n                <stat-ui id=\"success-order-id\" label=\"Order #\" value=\"—\"></stat-ui>\n                <stat-ui id=\"success-total\" label=\"Total charged (USD)\" value=\"$0\"></stat-ui>\n                <stat-ui id=\"success-eta\" label=\"Arrives\" value=\"May 9 — May 11\"></stat-ui>\n              </row-ui>\n              <text-ui variant=\"caption\"\n                >A confirmation email is on its way to <code id=\"success-email\">you@example.com</code>. You can review the order in your account or keep\n                shopping.</text-ui\n              >\n              <row-ui gap=\"2\" wrap>\n                <button-ui id=\"continue-shopping\" text=\"Continue shopping\" variant=\"primary\"></button-ui>\n                <button-ui id=\"view-receipt\" text=\"View receipt\" variant=\"outline\"></button-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>",
  "source": "playgrounds/composed-flow/app/composed-flow.contents.html",
  "metadata": {
    "domain": "content",
    "description": "Order-confirmation success card — a confirmation panel headed by a check-circle icon and an 'Order confirmed' title, showing the order number, total charged, and arrival estimate as a row of stats, a 'confirmation email is on its way' note, and Continue-shopping / View-receipt actions. The canonical post-checkout 'your order is placed' success / thank-you screen.",
    "keywords": [
      "order",
      "confirmation",
      "success",
      "confirmed",
      "checkout",
      "complete",
      "thank",
      "you",
      "receipt",
      "placed",
      "purchase",
      "done",
      "order",
      "number",
      "total",
      "charged",
      "arrival",
      "estimate",
      "delivery",
      "email",
      "sent",
      "stats",
      "continue",
      "shopping",
      "view",
      "receipt",
      "success",
      "card",
      "celebration",
      "completed",
      "payment",
      "success",
      "confirmation",
      "screen",
      "thank",
      "you",
      "page"
    ]
  },
  "captured_at": "2026-06-10T19:45:40.486Z",
  "template": [
    {
      "id": "check-circle",
      "component": "Icon",
      "name": "check-circle"
    },
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "check-circle"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "Order confirmed",
      "variant": "body"
    },
    {
      "id": "header",
      "component": "Header",
      "slot": "heading",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "success-order-id",
      "component": "Stat",
      "label": "Order #",
      "value": "—"
    },
    {
      "id": "success-total",
      "component": "Stat",
      "label": "Total charged (USD)",
      "value": "$0"
    },
    {
      "id": "success-eta",
      "component": "Stat",
      "label": "Arrives",
      "value": "May 9 — May 11"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "4",
      "wrap": true,
      "children": [
        "success-order-id",
        "success-total",
        "success-eta"
      ]
    },
    {
      "id": "success-email",
      "component": "Code",
      "textContent": "you@example.com"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "caption",
      "textContent": "A confirmation email is on its way to . You can review the order in your account or keep shopping.",
      "children": [
        "success-email"
      ]
    },
    {
      "id": "continue-shopping",
      "component": "Button",
      "text": "Continue shopping",
      "variant": "primary"
    },
    {
      "id": "view-receipt",
      "component": "Button",
      "text": "View receipt",
      "variant": "outline"
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "2",
      "wrap": true,
      "children": [
        "continue-shopping",
        "view-receipt"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "4",
      "children": [
        "row",
        "text-3",
        "row-2"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    }
  ]
}