Components

Section 门户区块

具备标准化垂直间距节奏（sm、md、lg、xl）、背景变体（default、muted、card、brand）以及内置标题/副标题的营销与控制台区块容器。

基础区块与垂直节奏

内置 Container 包裹与自适应标题区域，快速搭建规格统一的落地页区块。

核心能力一览

构建现代化多云服务与微服务基础设施的高性能组件套件

高可靠架构

毫秒级故障自动切流与状态恢复

开箱即用

设计 Tokens 与深浅模式完美契合

全栈支持

Nuxt 4 / Vue 3 与静态站点一键集成

<Section
  title="核心能力一览"
  description="构建现代化多云服务与微服务基础设施的高性能组件套件"
  variant="muted"
  spacing="sm"
>
  <div class="grid grid-cols-3 gap-4">
    <!-- 子内容 -->
  </div>
</Section>

背景变体与左对齐排版

支持 brand 渐变与 card 边框模式，支持左对齐 header。

开发者至上的 API

TypeScript 严格强类型、ARIA 无障碍与完全受控的状态模型

每一个组件都经历了完整的属性校验与键盘交互测试。

<Section
  title="开发者至上的 API"
  description="TypeScript 严格强类型、ARIA 无障碍与完全受控的状态模型"
  variant="card"
  align="left"
  spacing="sm"
>
  <p>内容...</p>
</Section>

API 参考

属性	类型	默认值	说明
`as`	`string`	`'section'`	渲染出的底层 HTML 标签。
`variant`	`'default' \| 'muted' \| 'card' \| 'brand'`	`'default'`	背景底色与边框变体。
`spacing`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	垂直内边距节奏。
`container`	`boolean`	`true`	是否内置 Container 包裹子元素。
`containerSize`	`ContainerSize`	`'xl'`	内置 Container 的尺寸。
`title`	`string`	`undefined`	区块标题文案。
`description`	`string`	`undefined`	区块副标题文案。
`align`	`'left' \| 'center'`	`'center'`	标题区域文本对齐方向。