样式指南

本样式指南页面包含整站通用的样式与组件规范。

排版
HTML 标题标签
HTML标签定义默认标题样式。
全部 H1 标题

标题 1

全部 H2 标题

标题 2

全部 H3 标题

标题 3

全部 H4 标题

标题 4

全部 H5 标题
标题 5
全部 H6 标题
标题 6
标题类
当排版样式与默认HTML标签不一致时使用的标题类。
heading-style-h1

标题样式-h1

heading-style-h2

标题样式-h2

heading-style-h3

标题样式-h3

heading-style-h4

标题样式-h4

heading-style-h5

标题样式-h5

heading-style-h6

标题样式-h6

其他HTML标签
HTML标签定义默认文本样式。
全部段落

示例文本：用于展示段落默认样式与行间距效果。

全部链接
全部链接
全部 Block Quotes
Block Quote
全部 Unordered Lists

  • 否 bullet list

  • 否 bullet list

全部 Unordered Lists

  • 否 bullet list

  • 否 bullet list

全部 Ordered Lists

  1. 否 bullet list

  2. 否 bullet list

  3. 否 bullet list

字号
当排版字号与默认HTML标签不一致时使用的字号类。
text-size-large

示例文本：用于展示不同字号与段落样式效果。

text-size-medium

示例文本：用于展示不同字号与段落样式效果。

text-size-regular

示例文本：用于展示不同字号与段落样式效果。

text-size-small

示例文本：用于展示不同字号与段落样式效果。

text-size-tiny

示例文本：用于展示不同字号与段落样式效果。

字重
当排版字重与默认HTML标签不一致时使用的字重类。
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
文字样式
当排版样式与默认HTML标签不一致时使用的文字样式类。
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-link
text-style-2lines
示例文本：用于展示两行截断效果与文本样式。
text-style-3lines
示例文本：用于展示三行截断效果与文本样式，可用于较长文案的排版。
text-style-muted
text-style-muted
text-style-tagline
text-style-tagline
对齐方式
当排版对齐方式与默认HTML标签不一致时使用的对齐类。
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
富文本
text-rich-text

标题 1

标题 2

标题 3

标题 4

标题 5
标题 6
这是引用文本

富文本元素可在同一处创建并格式化标题、段落、引用、图片与视频，无需逐一添加和调整。双击即可快速编辑内容。

这是富文本中的链接

  • 列表项
  • 列表项
  • 列表项
  1. 列表项
  2. 列表项
  3. 列表项
这里是图注
颜色
背景色
管理常用背景色。
background-color-black
background-color-white
background-color-primary
background-color-secondary
background-color-tertiary
background-color-alternative
文字颜色
管理常用文字颜色。
text-color-white
text-color-white
text-color-black
text-color-black
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
text-color-alternate
效果
阴影
‍ 通过在Z轴上定位元素，阴影为设计增加层次与真实感。
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
界面元素
按钮
按钮
按钮
按钮
描边
按钮
按钮
第三样式
按钮
链接样式
按钮
在深色背景上使用时，请添加扩展类 反色
按钮
反色
按钮
按钮
透明
按钮
按钮
链接样式
反色
按钮
带图标按钮
按钮
图标样式
按钮
按钮
小号
图标样式
按钮
按钮
链接样式
图标样式
按钮
按钮
仅图标
按钮
小号
仅图标
按钮
第三样式
仅图标
按钮
第三样式
小号
仅图标
按钮
链接样式
仅图标
表单元素
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
感谢！您的提交已收到！
抱歉！提交表单时出错了。
在深色背景上使用表单时，可添加扩展类 is-alternate
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
感谢！您的提交已收到！
抱歉！提交表单时出错了。
Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

标签
可点击的标签，用于在卡片、产品和文章中分类或强调信息
标签
标签
标签
文本
标签
标签
反色
标签
标签
文本
反色
标签
图标（HTML嵌入）
HTML嵌入图标可控制悬停时的图标颜色。

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

结构类
可在全部或大多数页面复用的基础结构。
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
最大宽度
使用 max-width CSS 属性限制内容的最大宽度。
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Margins
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
间距
统一的项目间距体系。
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
inherit-color