For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.2.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.2.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.2.0/en/components/workspace-header.md.
A3S UI
  • English
  • v0.2.0

      • Workspace Header

      A Workspace Header keeps navigation, resource identity, contextual metadata, and high-value actions aligned across editors and operational consoles.

      Live previewHTML · CSS · JavaScript
      GW

      Production gateway

      ACL configuration · saved 12 seconds ago
      Healthy

      Usage

      <header class="workspace-header">
  <div data-workspace-leading>...</div>
  <div data-workspace-identity><h1>Resource name</h1><span>Metadata</span></div>
  <div data-workspace-actions>...</div>
</header>

      Parameters

      ParameterRequiredPurpose
      data-workspace-leadingOptionalBack, menu, or resource-kind controls
      data-workspace-identityYesFlexible title and metadata region
      data-workspace-actionsOptionalRight-aligned contextual actions
      data-collapse="mobile"OptionalHides secondary content below 640px
      --workspace-header-heightOptionalStable header height, default 3.125rem (50px)

      States

      Represent save, validation, and health status with adjacent Badge or status text. Do not encode application state in the header class itself.

      Accessibility

      Keep one page-level <h1> inside the identity region. Icon buttons need accessible names. Editable names should use a labeled input in production; contenteditable is used only to demonstrate live text in the preview.