品牌标识组

品牌标识组把官方标记、产品名称和可选说明组合成一个稳定身份，用于应用标题栏、认证入口与产品导航。

A3S Cloud控制平面

安装Terminal

npm install @a3s-lab/ui@0.4.0

<a class="brand-lockup" href="/" aria-label="返回 A3S OS 首页">
  <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>智能工作系统</small>
  </span>
</a>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

导入完整样式包，或按需导入品牌标识组。

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

标识组用于返回产品首页时使用链接；只说明当前产品身份时使用普通容器。官方 Logo 路径由部署环境提供，文档站使用 /logo.png。

<a class="brand-lockup" href="/" aria-label="返回 A3S OS 首页">
  <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>智能工作系统</small>
  </span>
</a>

参数

API	必填	用途
`class="brand-lockup"`	是	根元素
`data-brand-mark`	是	官方标记区域
`data-brand-identity`	有说明时	组合名称与说明
`data-brand-name`	是	可见产品名称
`data-brand-description`	否	简短产品上下文，不是营销口号
`data-size="sm"`	否	适配密集标题栏的紧凑尺寸
`data-tone="mono"`	否	受限单色环境中的后备呈现
`--brand-lockup-accent`	否	仅使用获准品牌令牌覆盖强调色

状态与变体

默认尺寸用于认证页、导航标题和空白启动面；紧凑尺寸用于空间受限的工作区标题栏。名称可以直接跟随标记，也可以与一句说明组成身份列。只有无法使用彩色资产的受限环境才启用 data-tone="mono"。

品牌标识组不表达在线、危险、成功或权限状态。不要使用业务状态色重绘 Logo，不要裁切、拉伸、加阴影、替换字母标记或在不同产品中虚构新图形。A3S 子产品共享官方 A3S OS 标记，通过可见名称区分。

可访问性

产品名称必须保留为可见文本，不能只显示 Logo。标记和图片是对名称的视觉补充，应放在 aria-hidden="true" 的区域内并使用空 alt，避免重复朗读。整个标识组是链接时，链接名称应说明目标，例如“返回 A3S OS 首页”；当前产品身份不是导航时不要赋予链接或按钮语义。紧凑布局可以截断非必要说明，但不能隐藏产品名称。宿主负责提供正确、获准且可缓存的官方资产，组件只负责尺寸、排列与焦点呈现。

#品牌标识组

#用法

#参数

#状态与变体

#可访问性

品牌标识组

用法

参数

状态与变体

可访问性