Back to Details

sgds-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SGDS Patterns

SGDS 模式

This skill catalogs all reusable UI patterns available in SGDS. Patterns are production-ready templates that combine SGDS components and utilities to solve common UI needs.
此技能收录了SGDS中所有可用的可复用UI模式。这些模式是结合SGDS组件与工具类打造的生产就绪型模板，用于解决常见UI需求。

When to Use This Skill

何时使用此技能

Use this skill whenever you need to:
  • Implement a typography pattern (page headings, content headers, lists, paragraphs with specific sizing/weight)
  • Build a form pattern (multi-field forms, validation patterns, input groupings)
  • Create page layouts (login page, empty states, data tables, search interfaces)
  • Display notifications, reviews, or data visualizations with SGDS
  • Find the exact HTML markup and SGDS utility classes for a UI pattern
当你需要以下操作时，可使用此技能：
  • 实现排版模式（页面标题、内容标题、列表、特定尺寸/字重的段落）
  • 构建表单模式（多字段表单、验证模式、输入组）
  • 创建页面布局（登录页、空状态、数据表、搜索界面）
  • 使用SGDS展示通知、评论或数据可视化内容
  • 查找UI模式对应的精确HTML标记与SGDS工具类

Prerequisites

前置条件

Before implementing any pattern, ensure you have:
  1. sgds-getting-started: Initial application setup (Inter font, foundation CSS imports, component registration)
  2. sgds-utilities: Understanding of SGDS utility classes (spacing, typography, color, grid, etc.)
  3. sgds-components: Knowledge of SGDS web components used within patterns
Refer to these skills before asking how to implement a pattern.
在实现任何模式之前，请确保你已具备：
  1. sgds-getting-started：应用初始设置（Inter字体、基础CSS导入、组件注册）
  2. sgds-utilities：了解SGDS工具类（间距、排版、颜色、网格等）
  3. sgds-components：熟悉模式中使用的SGDS Web组件
在询问如何实现模式之前，请先参考上述技能。

Current Patterns: Typography

当前模式：排版

Typography patterns define semantic, reusable layouts for text content. All patterns use SGDS utilities for consistent styling and respect the design token hierarchy.
Use the category links below to find specific patterns:
  • Heading - Page and section headings with optional overlines (6 patterns)
  • Display - Large, prominent display typography (12 patterns)
  • Content - Card titles and subsection headings (6 patterns)
  • List - Ordered and unordered lists in three sizes (6 patterns)
  • Paragraph - Body text styles for longer-form content (3 patterns)
排版模式为文本内容定义了语义化、可复用的布局。所有模式均使用SGDS工具类确保样式一致性，并遵循设计令牌层级。
使用下方分类链接查找特定模式：
  • 标题 - 带可选overline的页面与章节标题（6种模式）
  • 展示型文本 - 大尺寸醒目展示型排版（12种模式）
  • 内容标题 - 卡片标题与小节标题（6种模式）
  • 列表 - 三种尺寸的有序与无序列表（6种模式）
  • 段落 - 适用于长篇内容的正文文本样式（3种模式）

How to Use a Pattern

如何使用模式

  1. Find the pattern you need using the category links above or the specific pattern reference files
  2. Get the raw HTML template from the GitHub URL in the reference file
  3. Extract the template (the 
    const XxxTemplate = () => html\
    ....`` part) — this is the markup to implement
  4. Adapt to your content — replace placeholder text and adjust SGDS utility classes as needed for your use case
  5. Combine with sgds-components if the pattern includes interactive elements (buttons, forms, dropdowns, etc.)
  1. 查找所需模式：通过上方分类链接或特定模式参考文件找到目标模式
  2. 获取原始HTML模板：从参考文件中的GitHub链接获取模板
  3. 提取模板：提取
    const XxxTemplate = () => html\
    ....``部分——这是用于实现的标记代码
  4. 适配内容：替换占位文本，并根据你的使用场景调整SGDS工具类
  5. 结合sgds-components：如果模式包含交互元素（按钮、表单、下拉菜单等），请结合SGDS组件使用

Pattern Naming Convention

模式命名规范

Pattern files follow this naming scheme:
stories/patterns/[Category]/[Subcategory]/[PatternName]-[variant].stories.js
Examples:
  • Typography/Heading/h1.stories.js
    → H1 pattern (default weight)
  • Typography/Heading/h1-light.stories.js
    → H1 pattern (light weight)
  • Typography/Display/display-lg-center.stories.js
    → Large display, center-aligned
  • Typography/List/ul-body-md.stories.js
    → Unordered list, body-medium size
Variants indicate:
  • Weight: 
    -light
    suffix for light font-weight variants
  • Alignment: 
    -center
    suffix for center-aligned variants
  • Size: Built into the name (e.g., 
    display-sm
    , 
    body-md
    )
模式文件遵循以下命名规则：
stories/patterns/[Category]/[Subcategory]/[PatternName]-[variant].stories.js
示例：
  • Typography/Heading/h1.stories.js
    → H1模式（默认字重）
  • Typography/Heading/h1-light.stories.js
    → H1模式（轻量字重）
  • Typography/Display/display-lg-center.stories.js
    → 大尺寸展示型文本，居中对齐
  • Typography/List/ul-body-md.stories.js
    → 无序列表，中等尺寸正文
变体标识说明：
  • 字重：后缀
    -light
    表示轻量字重变体
  • 对齐方式：后缀
    -center
    表示居中对齐变体
  • 尺寸：包含在名称中（例如
    display-sm
    、
    body-md
    ）

Integration Example

集成示例

Here's a quick example of how to use a typography pattern:
html
<!-- Import SGDS foundation styles and components -->
<link rel="stylesheet" href="@govtechsg/sgds-web-component/lib/index.css" />
<script type="module" src="@govtechsg/sgds-web-component/lib/index.js"></script>

<!-- Use the H1 pattern template -->
<div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="max-width: var(--sgds-text-max-width);">
  <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
    Overline Label
  </div>
  <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
    Page Heading Goes Here
  </h1>
  <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
    Supporting body text that provides context and detail for the page or section above.
  </p>
</div>
Copy the template, substitute your content, and the pattern is ready to use.
以下是使用排版模式的快速示例：
html
<!-- Import SGDS foundation styles and components -->
<link rel="stylesheet" href="@govtechsg/sgds-web-component/lib/index.css" />
<script type="module" src="@govtechsg/sgds-web-component/lib/index.js"></script>

<!-- Use the H1 pattern template -->
<div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="max-width: var(--sgds-text-max-width);">
  <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
    Overline Label
  </div>
  <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
    Page Heading Goes Here
  </h1>
  <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
    Supporting body text that provides context and detail for the page or section above.
  </p>
</div>
复制模板，替换你的内容，即可使用该模式。

Accessing Pattern Files

访问模式文件

All patterns are stored in the repository at 
stories/patterns/
and available on GitHub. Use the typography category links above to find the exact URL for any pattern:
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/patterns/Typography/[Subcategory]/[PatternName].stories.js
Each category reference file contains a table with direct links to all patterns in that category.
所有模式均存储在仓库的
stories/patterns/
目录下，可在GitHub上获取。使用上方排版分类链接查找任意模式的精确URL：
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/patterns/Typography/[Subcategory]/[PatternName].stories.js
每个分类参考文件中都包含一个表格，提供该分类下所有模式的直接链接。",