{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Illustration",
  "description": "Centered illustration block pairing a decorative SVG with an optional headline and message, used for empty states, error states, and other narrative moments.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./illustration.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "illustration",
    "restrict": [
      "div"
    ],
    "description": "Initiates an illustration component",
    "attributes": {
      "static": {
        "class": "slds-illustration"
      }
    },
    "variants": [
      {
        "name": "size",
        "description": "Mutually exclusive size treatment that sets the SVG max width/height and the surrounding spacing.",
        "options": [
          {
            "value": "small",
            "class": "slds-illustration_small",
            "description": "Applies width and height values for small illustrations"
          },
          {
            "value": "large",
            "class": "slds-illustration_large",
            "description": "Applies width and height values for large illustrations"
          }
        ]
      }
    ],
    "children": [
      {
        "name": "svg",
        "restrict": [
          "svg"
        ],
        "description": "Decorative SVG artwork. The component itself does not render glyph content; consumers supply the artwork paths and apply the stroke/fill role classes below. Should carry aria-hidden=\"true\" because the message text describes the state.",
        "attributes": {
          "static": {
            "class": "slds-illustration__svg"
          }
        },
        "children": [
          {
            "name": "strokePrimary",
            "restrict": [
              "path",
              "polyline",
              "polygon",
              "circle",
              "rect",
              "line",
              "ellipse",
              "g"
            ],
            "description": "Marker class for SVG nodes painted with the primary stroke color.",
            "attributes": {
              "static": {
                "class": "slds-illustration__stroke-primary"
              }
            }
          },
          {
            "name": "strokeSecondary",
            "restrict": [
              "path",
              "polyline",
              "polygon",
              "circle",
              "rect",
              "line",
              "ellipse",
              "g"
            ],
            "description": "Marker class for SVG nodes painted with the secondary stroke color.",
            "attributes": {
              "static": {
                "class": "slds-illustration__stroke-secondary"
              }
            }
          },
          {
            "name": "fillPrimary",
            "restrict": [
              "path",
              "polyline",
              "polygon",
              "circle",
              "rect",
              "line",
              "ellipse",
              "g"
            ],
            "description": "Marker class for SVG nodes filled with the primary fill color.",
            "attributes": {
              "static": {
                "class": "slds-illustration__fill-primary"
              }
            }
          },
          {
            "name": "fillSecondary",
            "restrict": [
              "path",
              "polyline",
              "polygon",
              "circle",
              "rect",
              "line",
              "ellipse",
              "g"
            ],
            "description": "Marker class for SVG nodes filled with the secondary fill color.",
            "attributes": {
              "static": {
                "class": "slds-illustration__fill-secondary"
              }
            }
          }
        ]
      },
      {
        "name": "textLongform",
        "restrict": [
          "div"
        ],
        "description": "Longform text wrapper that holds the optional headline and supporting message beneath the SVG.",
        "attributes": {
          "static": {
            "class": "slds-text-longform"
          }
        },
        "children": [
          {
            "name": "heading",
            "restrict": [
              "h1",
              "h2",
              "h3",
              "h4",
              "h5",
              "h6"
            ],
            "description": "Illustration headline. Tag level should be chosen for the surrounding document outline.",
            "attributes": {
              "static": {
                "class": "slds-text-heading_medium"
              }
            }
          },
          {
            "name": "message",
            "restrict": [
              "p"
            ],
            "description": "Supporting body copy that explains the illustrated state. Omit for headline-only treatments.",
            "attributes": {
              "static": {
                "class": "slds-text-body_regular"
              }
            }
          }
        ]
      }
    ]
  }
}