{
  "_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": "Card",
  "description": "Initializes card",
  "structure": {
    "name": "root",
    "restrict": [
      "article",
      "div"
    ],
    "description": "Initializes card",
    "children": [
      {
        "name": "header",
        "restrict": [
          "div"
        ],
        "description": "Initializes card header",
        "children": [
          {
            "name": "headerMedia",
            "restrict": [
              "header",
              "div"
            ],
            "description": "Header media layout (icon, body, actions)",
            "children": [
              {
                "name": "headerGrid",
                "restrict": [
                  "div"
                ],
                "description": "Inner grid wrapper used by Einstein-style headers to size the figure-and-title block",
                "renderWhen": {
                  "prop": "style",
                  "eq": "einstein"
                },
                "attributes": {
                  "static": {
                    "class": "slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"
                  }
                }
              },
              {
                "name": "headerIcon",
                "restrict": [
                  "div"
                ],
                "description": "icon in the card header (media figure)",
                "renderWhen": "slotFilled",
                "slot": {
                  "name": "headerIcon",
                  "restrict": [
                    "Icon"
                  ]
                },
                "children": [
                  {
                    "name": "headerIconContainer",
                    "restrict": [
                      "span"
                    ],
                    "description": "Sprite icon container",
                    "children": [
                      {
                        "name": "headerIconSvg",
                        "description": "Icon glyph svg",
                        "component": "PrimitiveIcon",
                        "attributes": {
                          "static": {
                            "class": "slds-icon slds-icon_small"
                          }
                        },
                        "modifiers": [
                          {
                            "name": "iconTextDefault",
                            "attribute": "class",
                            "value": "slds-icon-text-default",
                            "description": "Tints the icon to the default text color (Einstein header icon)"
                          }
                        ],
                        "children": [
                          {
                            "name": "headerIconUse"
                          }
                        ]
                      },
                      {
                        "name": "headerIconAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Assistive text for the icon",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-icon_container"
                      }
                    },
                    "variants": [
                      {
                        "name": "standardIcon",
                        "description": "Standard sprite glyph applied to the header icon container",
                        "options": [
                          {
                            "value": "account",
                            "class": "slds-icon-standard-account"
                          },
                          {
                            "value": "contact",
                            "class": "slds-icon-standard-contact"
                          },
                          {
                            "value": "task",
                            "class": "slds-icon-standard-task"
                          }
                        ]
                      },
                      {
                        "name": "utilityIcon",
                        "description": "Utility sprite glyph applied to the header icon container (used by Einstein header)",
                        "options": [
                          {
                            "value": "salesforce1",
                            "class": "slds-icon-utility-salesforce1"
                          }
                        ]
                      }
                    ]
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-media__figure"
                  }
                }
              },
              {
                "name": "headerBody",
                "restrict": [
                  "div"
                ],
                "description": "Header body containing the title",
                "children": [
                  {
                    "name": "headerTitle",
                    "restrict": [
                      "h2",
                      "h3"
                    ],
                    "description": "Title element within card header",
                    "slot": {
                      "name": "title",
                      "required": true
                    },
                    "children": [
                      {
                        "name": "headerLink",
                        "restrict": [
                          "a"
                        ],
                        "description": "Actionable element within the card header title",
                        "children": [
                          {
                            "name": "headerTitleText",
                            "restrict": [
                              "span"
                            ],
                            "description": "Inline title text",
                            "modifiers": [
                              {
                                "name": "headingSmall",
                                "attribute": "class",
                                "value": "slds-text-heading_small",
                                "description": "Applies the small heading typography (Einstein header title)"
                              }
                            ]
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-card__header-link slds-truncate"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-card__header-title"
                      }
                    },
                    "modifiers": [
                      {
                        "name": "truncate",
                        "attribute": "class",
                        "value": "slds-truncate",
                        "description": "Truncates the title text when it overflows (used when the title carries the truncate hook directly, e.g. Einstein header)"
                      }
                    ]
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-media__body"
                  }
                }
              },
              {
                "name": "headerActions",
                "restrict": [
                  "div"
                ],
                "description": "Header action buttons container",
                "renderWhen": "slotFilled",
                "slot": {
                  "name": "actions"
                },
                "attributes": {
                  "static": {
                    "class": "slds-no-flex"
                  }
                },
                "children": [
                  {
                    "name": "headerActionButton",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_neutral"
                      }
                    }
                  }
                ]
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-media slds-media_center slds-has-flexi-truncate"
              }
            }
          },
          {
            "name": "einsteinFigure",
            "restrict": [
              "div"
            ],
            "description": "Decorative figure area used by Einstein-style headers",
            "renderWhen": {
              "prop": "style",
              "eq": "einstein"
            },
            "attributes": {
              "static": {
                "class": "slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"
              }
            }
          },
          {
            "name": "einsteinActions",
            "restrict": [
              "div"
            ],
            "description": "Actions area unique to Einstein-style headers (separate from the media layout)",
            "renderWhen": {
              "prop": "style",
              "eq": "einstein"
            },
            "children": [
              {
                "name": "einsteinActionsGroup",
                "restrict": [
                  "div"
                ],
                "description": "Button group for einstein-header actions",
                "children": [
                  {
                    "name": "einsteinActionButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Action button inside the einstein-header actions group",
                    "repeats": true,
                    "children": [
                      {
                        "name": "einsteinActionIcon",
                        "description": "Action button icon svg",
                        "component": "PrimitiveIcon",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon"
                          }
                        },
                        "children": [
                          {
                            "name": "einsteinActionUse"
                          }
                        ]
                      },
                      {
                        "name": "einsteinActionAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Assistive text for the action button",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_icon slds-button_icon-border-filled",
                        "aria-pressed": "false"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-button-group",
                    "role": "group"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-einstein-header__actions"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-card__header slds-grid"
          }
        },
        "modifiers": [
          {
            "name": "assistiveText",
            "attribute": "class",
            "value": "slds-assistive-text",
            "description": "Visibly hides the card header while keeping it available to assistive technologies"
          },
          {
            "name": "einsteinHeader",
            "attribute": "class",
            "value": "slds-einstein-header",
            "description": "Einstein themed card header"
          }
        ]
      },
      {
        "name": "body",
        "restrict": [
          "div"
        ],
        "description": "Initializes card body",
        "slot": {
          "name": "default",
          "required": true
        },
        "children": [
          {
            "name": "bodySpinner",
            "restrict": [
              "div"
            ],
            "description": "Loading spinner shown inside the body while content is loading",
            "renderWhen": {
              "prop": "state",
              "eq": "loading"
            },
            "children": [
              {
                "name": "bodySpinnerAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Loading assistive text",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              },
              {
                "name": "bodySpinnerDotA",
                "restrict": [
                  "div"
                ],
                "description": "First spinner dot",
                "attributes": {
                  "static": {
                    "class": "slds-spinner__dot-a"
                  }
                }
              },
              {
                "name": "bodySpinnerDotB",
                "restrict": [
                  "div"
                ],
                "description": "Second spinner dot",
                "attributes": {
                  "static": {
                    "class": "slds-spinner__dot-b"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-spinner slds-spinner_small",
                "role": "status"
              }
            }
          },
          {
            "name": "bodyIllustration",
            "restrict": [
              "div"
            ],
            "description": "Empty-state illustration block (svg + longform text)",
            "renderWhen": {
              "prop": "state",
              "eq": "empty"
            },
            "children": [
              {
                "name": "bodyIllustrationSvg",
                "restrict": [
                  "svg"
                ],
                "description": "Illustration svg",
                "children": [
                  {
                    "name": "bodyIllustrationGroup",
                    "restrict": [
                      "g"
                    ],
                    "description": "Illustration group container",
                    "repeats": true
                  },
                  {
                    "name": "bodyIllustrationPath",
                    "restrict": [
                      "path"
                    ],
                    "description": "Illustration path (stroke or fill)",
                    "repeats": true,
                    "variants": [
                      {
                        "name": "illustrationPaint",
                        "description": "Stroke or fill class applied to illustration shapes",
                        "options": [
                          {
                            "value": "fill-primary",
                            "class": "slds-illustration__fill-primary"
                          },
                          {
                            "value": "fill-secondary",
                            "class": "slds-illustration__fill-secondary"
                          },
                          {
                            "value": "stroke-primary",
                            "class": "slds-illustration__stroke-primary"
                          },
                          {
                            "value": "stroke-secondary",
                            "class": "slds-illustration__stroke-secondary"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "bodyIllustrationPolygon",
                    "restrict": [
                      "polygon"
                    ],
                    "description": "Illustration polygon",
                    "repeats": true
                  },
                  {
                    "name": "bodyIllustrationPolyline",
                    "restrict": [
                      "polyline"
                    ],
                    "description": "Illustration polyline",
                    "repeats": true
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-illustration__svg",
                    "aria-hidden": "true"
                  }
                }
              },
              {
                "name": "bodyIllustrationText",
                "restrict": [
                  "div"
                ],
                "description": "Long-form copy paired with the illustration",
                "children": [
                  {
                    "name": "bodyIllustrationHeading",
                    "restrict": [
                      "h3"
                    ],
                    "description": "Illustration heading",
                    "attributes": {
                      "static": {
                        "class": "slds-text-heading_medium"
                      }
                    }
                  },
                  {
                    "name": "bodyIllustrationParagraph",
                    "restrict": [
                      "p"
                    ],
                    "description": "Illustration body copy",
                    "attributes": {
                      "static": {
                        "class": "slds-text-body_regular"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-text-longform"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-illustration slds-illustration_small"
              }
            }
          },
          {
            "name": "bodyTable",
            "restrict": [
              "table"
            ],
            "description": "Related-list table rendered inside the card body",
            "renderWhen": {
              "prop": "content",
              "eq": "table"
            },
            "children": [
              {
                "name": "bodyTableHead",
                "restrict": [
                  "thead"
                ],
                "description": "Table head",
                "children": [
                  {
                    "name": "bodyTableHeadRow",
                    "restrict": [
                      "tr"
                    ],
                    "description": "Header row",
                    "children": [
                      {
                        "name": "bodyTableHeader",
                        "restrict": [
                          "th"
                        ],
                        "description": "Column header cell",
                        "repeats": true,
                        "children": [
                          {
                            "name": "bodyTableHeaderCell",
                            "restrict": [
                              "div"
                            ],
                            "description": "Inner truncating wrapper for header text",
                            "attributes": {
                              "static": {
                                "class": "slds-truncate"
                              }
                            }
                          }
                        ]
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-line-height_reset"
                      }
                    }
                  }
                ]
              },
              {
                "name": "bodyTableBody",
                "restrict": [
                  "tbody"
                ],
                "description": "Table body",
                "children": [
                  {
                    "name": "bodyTableRow",
                    "restrict": [
                      "tr"
                    ],
                    "description": "Body row",
                    "repeats": true,
                    "children": [
                      {
                        "name": "bodyTableRowHeader",
                        "restrict": [
                          "th"
                        ],
                        "description": "Row header cell",
                        "children": [
                          {
                            "name": "bodyTableRowHeaderCell",
                            "restrict": [
                              "div"
                            ],
                            "description": "Inner truncating wrapper for row header text",
                            "attributes": {
                              "static": {
                                "class": "slds-truncate"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "bodyTableCell",
                        "restrict": [
                          "td"
                        ],
                        "description": "Data cell",
                        "repeats": true,
                        "children": [
                          {
                            "name": "bodyTableCellInner",
                            "restrict": [
                              "div"
                            ],
                            "description": "Inner truncating wrapper for cell text",
                            "attributes": {
                              "static": {
                                "class": "slds-truncate"
                              }
                            }
                          }
                        ],
                        "attributes": {
                          "static": {
                            "role": "gridcell"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-hint-parent"
                      }
                    }
                  }
                ]
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered slds-table_fixed-layout",
                "role": "grid",
                "aria-label": "Example table in a Card"
              }
            }
          },
          {
            "name": "bodyTileList",
            "restrict": [
              "ul"
            ],
            "description": "Related-list tile grid rendered inside the card body",
            "renderWhen": {
              "prop": "content",
              "eq": "tiles"
            },
            "children": [
              {
                "name": "bodyTileItem",
                "restrict": [
                  "li"
                ],
                "description": "Single tile slot in the related-list grid",
                "repeats": true,
                "children": [
                  {
                    "name": "tile",
                    "restrict": [
                      "article"
                    ],
                    "description": "Use class if card consumes any form of a tile",
                    "children": [
                      {
                        "name": "tileFigure",
                        "restrict": [
                          "div"
                        ],
                        "description": "Tile media figure (icon)",
                        "children": [
                          {
                            "name": "tileIconContainer",
                            "restrict": [
                              "span"
                            ],
                            "description": "Tile icon sprite container",
                            "children": [
                              {
                                "name": "tileIconSvg",
                                "description": "Tile icon svg",
                                "component": "PrimitiveIcon",
                                "attributes": {
                                  "static": {
                                    "class": "slds-icon slds-icon_small"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "tileIconUse"
                                  }
                                ]
                              },
                              {
                                "name": "tileIconAssistiveText",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Assistive text for the tile icon",
                                "attributes": {
                                  "static": {
                                    "class": "slds-assistive-text"
                                  }
                                }
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-icon_container slds-icon-standard-contact"
                              }
                            }
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-media__figure"
                          }
                        }
                      },
                      {
                        "name": "tileBody",
                        "restrict": [
                          "div"
                        ],
                        "description": "Tile media body",
                        "children": [
                          {
                            "name": "tileBodyGrid",
                            "restrict": [
                              "div"
                            ],
                            "description": "Grid wrapping the title and the tile actions",
                            "children": [
                              {
                                "name": "tileTitle",
                                "restrict": [
                                  "h3"
                                ],
                                "description": "Tile title",
                                "children": [
                                  {
                                    "name": "tileTitleLink",
                                    "restrict": [
                                      "a"
                                    ],
                                    "description": "Tile title link"
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-tile__title slds-truncate"
                                  }
                                }
                              },
                              {
                                "name": "tileActions",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Tile-level actions container",
                                "children": [
                                  {
                                    "name": "tileActionButton",
                                    "restrict": [
                                      "button"
                                    ],
                                    "description": "Tile-level overflow action button",
                                    "children": [
                                      {
                                        "name": "tileActionIcon",
                                        "description": "Tile action icon svg",
                                        "component": "PrimitiveIcon",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-button__icon slds-button__icon_hint"
                                          }
                                        },
                                        "children": [
                                          {
                                            "name": "tileActionUse"
                                          }
                                        ]
                                      },
                                      {
                                        "name": "tileActionAssistiveText",
                                        "restrict": [
                                          "span"
                                        ],
                                        "description": "Assistive text for the tile action",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-assistive-text"
                                          }
                                        }
                                      }
                                    ],
                                    "attributes": {
                                      "static": {
                                        "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small",
                                        "aria-haspopup": "true"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-shrink-none"
                                  }
                                }
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-grid slds-grid_align-spread slds-has-flexi-truncate"
                              }
                            }
                          },
                          {
                            "name": "tileDetail",
                            "restrict": [
                              "div"
                            ],
                            "description": "Tile description-list area",
                            "children": [
                              {
                                "name": "tileDetailList",
                                "restrict": [
                                  "dl"
                                ],
                                "description": "Tile description list",
                                "children": [
                                  {
                                    "name": "tileDetailLabel",
                                    "restrict": [
                                      "dt"
                                    ],
                                    "description": "Detail label term",
                                    "repeats": true,
                                    "attributes": {
                                      "static": {
                                        "class": "slds-item_label slds-text-color_weak slds-truncate"
                                      }
                                    }
                                  },
                                  {
                                    "name": "tileDetailValue",
                                    "restrict": [
                                      "dd"
                                    ],
                                    "description": "Detail label value",
                                    "repeats": true,
                                    "attributes": {
                                      "static": {
                                        "class": "slds-item_detail slds-truncate"
                                      }
                                    }
                                  }
                                ],
                                "attributes": {
                                  "static": {
                                    "class": "slds-list_horizontal slds-wrap"
                                  }
                                }
                              }
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-tile__detail"
                              }
                            }
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-media__body"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-tile slds-media slds-card__tile slds-hint-parent"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-grid slds-wrap slds-grid_pull-padded"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-card__body"
          }
        },
        "modifiers": [
          {
            "name": "inner",
            "attribute": "class",
            "value": "slds-card__body_inner",
            "description": "Apply the same spacing found on the card header to the card body"
          }
        ]
      },
      {
        "name": "footer",
        "restrict": [
          "footer",
          "div"
        ],
        "description": "Initializes card footer",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "footer"
        },
        "children": [
          {
            "name": "footerAction",
            "restrict": [
              "a"
            ],
            "description": "Actionable element within card footer",
            "children": [
              {
                "name": "footerActionAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Assistive text appended to the footer action label",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-card__footer-action"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-card__footer"
          }
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-card"
      }
    },
    "modifiers": [
      {
        "name": "boundary",
        "attribute": "class",
        "value": "slds-card_boundary",
        "description": "Used to bring back the border on a card when needed"
      }
    ]
  },
  "accessibility": {
    "requirements": [
      {
        "id": "heading-hierarchy",
        "description": "Card title should use appropriate heading level for document outline"
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-card"
    }
  },
  "cssSource": "./card.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}