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

      • Brand Lockup

      Brand Lockup combines the official mark, product name, and an optional description into a stable identity for application headers, authentication entry points, and product navigation.

      Live preview
      A3S OSIntelligent work system
      A3S CloudControl plane

      Usage

      Import the complete style bundle or load Brand Lockup on demand.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/brand-lockup.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Use a link when the lockup returns to the product home page; use a neutral container when it only identifies the current product. The deployment host provides the approved asset path. This documentation site uses /logo.png.

      <a class="brand-lockup" href="/" aria-label="Return to the A3S OS home page">
  <span data-brand-mark aria-hidden="true">
    <img src="/logo.png" alt="" />
  </span>
  <span data-brand-identity>
    <strong data-brand-name>A3S OS</strong>
    <small data-brand-description>Intelligent work system</small>
  </span>
</a>

      Parameters

      APIRequiredPurpose
      class="brand-lockup"YesIdentity root
      data-brand-markYesOfficial mark region
      data-brand-identityWith a descriptionGroups the name and description
      data-brand-nameYesVisible product name
      data-brand-descriptionNoConcise product context, not a marketing slogan
      data-size="sm"NoCompact treatment for dense headers
      data-tone="mono"NoFallback for restricted monochrome environments
      --brand-lockup-accentNoApproved brand-token override only

      States and variants

      Use the default size on authentication pages, navigation titles, and spacious start surfaces. Use the compact size in constrained workspace headers. The name may sit directly beside the mark or join a one-line description in an identity column. Enable data-tone="mono" only where the color asset cannot be used.

      Brand Lockup does not communicate online, danger, success, or permission state. Do not recolor the logo with operational status colors, crop or stretch it, add a shadow, replace its letterform, or invent new marks for related products. A3S products share the official A3S OS mark and distinguish themselves with the visible name.

      Accessibility

      Keep the product name as visible text; never show the logo alone. The mark and image supplement that name, so place them in an aria-hidden="true" region and use an empty alt to prevent duplicate announcements. When the complete lockup is a link, its accessible name should state the destination, such as “Return to the A3S OS home page.” Do not add link or button semantics when it only identifies the current product. A compact layout may truncate a nonessential description but must never hide the product name. The host supplies a correct, approved, cacheable official asset; the component owns sizing, arrangement, and focus presentation.