{
  "_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": "PageHeader",
  "description": "Container that anchors the top of a page or related list, presenting an icon, title, meta information, and a row of contextual actions and controls.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./pageHeader.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "pageHeader",
    "restrict": [
      "div"
    ],
    "description": "Root page-header container that wraps title, meta, and action rows.",
    "attributes": {
      "static": {
        "class": "slds-page-header"
      }
    },
    "modifiers": [
      {
        "name": "joined",
        "attribute": "class",
        "value": "slds-page-header_joined",
        "description": "Flattens the bottom corners so the header visually joins to the content below it."
      },
      {
        "name": "hasBottomMagnet",
        "attribute": "class",
        "value": "slds-has-bottom-magnet",
        "description": "Flattens the bottom corners when sticky content is magnetized to the lower edge of the header."
      }
    ],
    "variants": [
      {
        "name": "context",
        "description": "Mutually exclusive page-header context that maps to the surrounding page pattern.",
        "options": [
          {
            "value": "base",
            "class": "",
            "description": "Default page header used for object home and generic page contexts."
          },
          {
            "value": "recordHome",
            "class": "slds-page-header_record-home",
            "description": "Record home pattern with a detail row underneath the title row."
          },
          {
            "value": "relatedList",
            "class": "slds-page-header_related-list",
            "description": "Related list pattern with breadcrumbs and a meta/controls row."
          },
          {
            "value": "vertical",
            "class": "slds-page-header_vertical",
            "description": "Narrow vertical layout used in record home side panels."
          }
        ],
        "default": "base"
      }
    ],
    "children": [
      {
        "name": "row",
        "restrict": [
          "div"
        ],
        "description": "Horizontal row inside the page header that groups title, actions, meta, or controls columns.",
        "repeats": true,
        "attributes": {
          "static": {
            "class": "slds-page-header__row"
          }
        },
        "modifiers": [
          {
            "name": "gutters",
            "attribute": "class",
            "value": "slds-page-header__row_gutters",
            "description": "Adds negative inline margins so the row spans the full bleed of the page header."
          }
        ],
        "children": [
          {
            "name": "colTitle",
            "restrict": [
              "div"
            ],
            "description": "Column that holds the entity icon, page title, and optional list switcher.",
            "attributes": {
              "static": {
                "class": "slds-page-header__col-title"
              }
            },
            "children": [
              {
                "name": "breadcrumbsNav",
                "restrict": [
                  "nav"
                ],
                "description": "Optional breadcrumb navigation displayed above the title (related list pattern).",
                "children": [
                  {
                    "name": "breadcrumbsList",
                    "restrict": [
                      "ol"
                    ],
                    "description": "Ordered list of breadcrumb items.",
                    "attributes": {
                      "static": {
                        "class": "slds-breadcrumb slds-list_horizontal slds-wrap"
                      }
                    },
                    "children": [
                      {
                        "name": "breadcrumbItem",
                        "restrict": [
                          "li"
                        ],
                        "description": "Individual breadcrumb entry containing a link.",
                        "repeats": true,
                        "attributes": {
                          "static": {
                            "class": "slds-breadcrumb__item"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "media",
                "restrict": [
                  "div"
                ],
                "description": "Media object layout placing the entity icon next to the title block.",
                "attributes": {
                  "static": {
                    "class": "slds-media"
                  }
                },
                "children": [
                  {
                    "name": "mediaFigure",
                    "restrict": [
                      "div"
                    ],
                    "description": "Media figure slot that holds the entity icon.",
                    "attributes": {
                      "static": {
                        "class": "slds-media__figure"
                      }
                    },
                    "children": [
                      {
                        "name": "iconContainer",
                        "restrict": [
                          "span"
                        ],
                        "description": "Inline-block wrapper that paints the icon background color for the entity sprite.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon_container slds-icon-standard-opportunity"
                          }
                        },
                        "children": [
                          {
                            "name": "icon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Entity icon glyph rendered at page-header size.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-page-header__icon"
                              }
                            }
                          },
                          {
                            "name": "iconAssistiveText",
                            "restrict": [
                              "span"
                            ],
                            "description": "Visually hidden label announcing the entity icon.",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "mediaBody",
                    "restrict": [
                      "div"
                    ],
                    "description": "Media body holding the page-header name block and meta line.",
                    "attributes": {
                      "static": {
                        "class": "slds-media__body"
                      }
                    },
                    "children": [
                      {
                        "name": "name",
                        "restrict": [
                          "div"
                        ],
                        "description": "Wrapper that groups the page title with an inline list-view switcher.",
                        "attributes": {
                          "static": {
                            "class": "slds-page-header__name"
                          }
                        },
                        "children": [
                          {
                            "name": "nameTitle",
                            "restrict": [
                              "div"
                            ],
                            "description": "Title block containing the h1 heading and the visible page-header title text.",
                            "attributes": {
                              "static": {
                                "class": "slds-page-header__name-title"
                              }
                            },
                            "children": [
                              {
                                "name": "heading",
                                "restrict": [
                                  "h1"
                                ],
                                "description": "Top-level page heading. The first inline span may carry an entity label preceding the title text.",
                                "children": [
                                  {
                                    "name": "entityLabel",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Optional entity label rendered before the title (for example, the object name)."
                                  },
                                  {
                                    "name": "title",
                                    "restrict": [
                                      "span"
                                    ],
                                    "description": "Primary page-header title text, truncated or hyphenated depending on the context.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-page-header__title slds-truncate"
                                      }
                                    },
                                    "modifiers": [
                                      {
                                        "name": "hyphenate",
                                        "attribute": "class",
                                        "value": "slds-hyphenate",
                                        "description": "Switches the title wrapping behavior from truncation to hyphenation (used in the vertical layout)."
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "name": "nameSwitcher",
                            "restrict": [
                              "div"
                            ],
                            "description": "Optional inline dropdown trigger that switches the current list view.",
                            "attributes": {
                              "static": {
                                "class": "slds-page-header__name-switcher slds-is-relative"
                              }
                            },
                            "children": [
                              {
                                "name": "switcherDropdown",
                                "restrict": [
                                  "div"
                                ],
                                "description": "Dropdown trigger that opens the list-view picker.",
                                "attributes": {
                                  "static": {
                                    "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "switcherButton",
                                    "restrict": [
                                      "button"
                                    ],
                                    "description": "Icon button that toggles the list-view dropdown.",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-button slds-button_icon slds-button_icon-small"
                                      }
                                    },
                                    "children": [
                                      {
                                        "name": "switcherIcon",
                                        "restrict": [
                                          "svg"
                                        ],
                                        "description": "Down chevron rendered inside the switcher button.",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-button__icon slds-icon_x-small"
                                          }
                                        }
                                      },
                                      {
                                        "name": "switcherAssistiveText",
                                        "restrict": [
                                          "span"
                                        ],
                                        "description": "Visually hidden label announcing the switcher action.",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-assistive-text"
                                          }
                                        }
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "name": "nameMeta",
                        "restrict": [
                          "p"
                        ],
                        "description": "Inline meta line rendered beneath the page title (for example, owner, type, date).",
                        "attributes": {
                          "static": {
                            "class": "slds-page-header__name-meta"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "colActions",
            "restrict": [
              "div"
            ],
            "description": "Column holding the primary action buttons aligned to the inline-end of the title row.",
            "attributes": {
              "static": {
                "class": "slds-page-header__col-actions"
              }
            },
            "children": [
              {
                "name": "actionsControls",
                "restrict": [
                  "div"
                ],
                "description": "Inline row of action controls inside the actions column.",
                "attributes": {
                  "static": {
                    "class": "slds-page-header__controls"
                  }
                },
                "children": [
                  {
                    "name": "actionsControl",
                    "restrict": [
                      "div"
                    ],
                    "description": "Wrapper that adds spacing between adjacent action controls.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-page-header__control"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "colMeta",
            "restrict": [
              "div"
            ],
            "description": "Column that holds the secondary meta-text line (for example, item count or last-updated time).",
            "attributes": {
              "static": {
                "class": "slds-page-header__col-meta"
              }
            },
            "children": [
              {
                "name": "metaText",
                "restrict": [
                  "p"
                ],
                "description": "Paragraph rendering the page-header meta-text.",
                "attributes": {
                  "static": {
                    "class": "slds-page-header__meta-text"
                  }
                }
              }
            ]
          },
          {
            "name": "colControls",
            "restrict": [
              "div"
            ],
            "description": "Column holding the secondary control buttons aligned to the inline-end of the meta row.",
            "attributes": {
              "static": {
                "class": "slds-page-header__col-controls"
              }
            },
            "children": [
              {
                "name": "controls",
                "restrict": [
                  "div"
                ],
                "description": "Inline row of secondary controls.",
                "attributes": {
                  "static": {
                    "class": "slds-page-header__controls"
                  }
                },
                "children": [
                  {
                    "name": "control",
                    "restrict": [
                      "div"
                    ],
                    "description": "Wrapper that adds spacing between adjacent secondary controls.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-page-header__control"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "colDetails",
            "restrict": [
              "div"
            ],
            "description": "Column that contains the record-home detail row spanning the full width of the page header.",
            "attributes": {
              "static": {
                "class": "slds-page-header__col-details"
              }
            },
            "children": [
              {
                "name": "detailRow",
                "restrict": [
                  "ul"
                ],
                "description": "Horizontal list of detail blocks displayed beneath the record-home title row.",
                "attributes": {
                  "static": {
                    "class": "slds-page-header__detail-row"
                  }
                },
                "children": [
                  {
                    "name": "detailBlock",
                    "restrict": [
                      "li"
                    ],
                    "description": "Individual record detail block holding a label and value pair.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-page-header__detail-block"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "verticalMedia",
        "restrict": [
          "div"
        ],
        "description": "Stacked media layout used in the vertical page-header context to render the icon above the title block.",
        "renderWhen": {
          "prop": "context",
          "eq": "vertical"
        },
        "attributes": {
          "static": {
            "class": "slds-media"
          }
        }
      },
      {
        "name": "verticalControls",
        "restrict": [
          "div"
        ],
        "description": "Stacked control row that sits directly under the title block in the vertical layout.",
        "renderWhen": {
          "prop": "context",
          "eq": "vertical"
        },
        "attributes": {
          "static": {
            "class": "slds-page-header__controls"
          }
        }
      },
      {
        "name": "detailList",
        "restrict": [
          "ul"
        ],
        "description": "Wrapped grid of record details rendered as the body of the vertical page header.",
        "renderWhen": {
          "prop": "context",
          "eq": "vertical"
        },
        "attributes": {
          "static": {
            "class": "slds-page-header__detail-list"
          }
        },
        "children": [
          {
            "name": "detailItem",
            "restrict": [
              "li"
            ],
            "description": "Single detail label/value pair in the vertical detail list.",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-page-header__detail-item"
              }
            }
          }
        ]
      }
    ]
  }
}