sgds-templates

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SGDS Page Templates

SGDS 页面模板

Ready-to-use full-page templates using SGDS components and utilities — adapted from the visual patterns of shadcn Blocks. Each template gives a beautiful starting point without writing layout code from scratch.

基于SGDS组件和工具打造的即用型全页模板——改编自shadcn Blocks的视觉模式。每个模板都提供了美观的起点，无需从零开始编写布局代码。

Prerequisites

前置要求

Every page must include the Application Shell. Read sgds-blocks → reference/application-shell.md before generating any page. The shell provides mandatory
<sgds-masthead>
,
<sgds-mainnav>
, and
<sgds-footer>
on every page, plus container class selection (
.sgds-container
vs
.sgds-container-sidebar
) and sticky-header conventions. Never generate a page template without all three shell components.

javascript

import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";

See sgds-getting-started and sgds-components for full installation.

For container width and max-width utilities used in these templates, see sgds-utilities.

每个页面都必须包含Application Shell（应用外壳）。 在生成任何页面之前，请阅读**sgds-blocks → reference/application-shell.md**。该外壳在每个页面上提供必填的
<sgds-masthead>
、
<sgds-mainnav>
和
<sgds-footer>
，还包含容器类选择（
.sgds-container
对比
.sgds-container-sidebar
）和粘性页眉约定。绝对不要生成缺少这三个外壳组件的页面模板。

javascript

import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";

如需完整安装说明，请查看**sgds-getting-started和sgds-components**。

关于这些模板中使用的容器宽度和最大宽度工具类，请查看**sgds-utilities**。

Quick Decision Guide

快速决策指南

What you're building	Template to use
Admin dashboard with filters & data table	Application Management
Public catalogue with search & filtering	Catalogue / Search & Filter
Internal tool, admin portal, analytics dashboard	Dashboard
Login / sign-in page	Login
Multi-field settings or data-entry form	Form Page
Company/agency profile, team intro, achievements	About Us
Product or service landing page	Landing Page
Blog post, news article, or case study	Blog / Content Page

你要构建的内容	使用的模板
带筛选器和数据表的管理仪表盘	应用管理
带搜索和筛选功能的公共目录	目录/搜索与筛选
内部工具、管理门户、分析仪表盘	仪表盘
登录/登入页面	登录页
多字段设置或数据录入表单	表单页
公司/机构简介、团队介绍、成果展示	关于我们
产品或服务着陆页	着陆页
博客文章、新闻报道或案例研究	博客/内容页

→ Read reference/application-management.md

→ 阅读 reference/application-management.md

Sidebar filters + search + data table + pagination. Use for admin dashboards, application registries, management portals.

侧边栏筛选器 + 搜索 + 数据表 + 分页。适用于管理仪表盘、应用注册系统、管理门户。

→ Read reference/catalogue.md

→ 阅读 reference/catalogue.md

Search + sidebar multi-group filters + sort dropdown + results grid + empty state. Use for product catalogues, event listings, content browsing.

搜索 + 侧边栏多组筛选器 + 排序下拉菜单 + 结果网格 + 空状态。适用于产品目录、活动列表、内容浏览场景。

→ Read reference/dashboard.md

→ 阅读 reference/dashboard.md

Sidebar navigation + stat cards row + data table. Use for dashboards, admin portals, internal tools with metrics.

Note: The dashboard template uses
sgds-sidebar
(RC component). Load the CDN script before other SGDS imports — see sgds-components sidebar reference for the CDN tag and framework setup.

侧边栏导航 + 统计卡片行 + 数据表。适用于仪表盘、管理门户、带指标的内部工具。

注意：仪表盘模板使用
sgds-sidebar
（候选版本组件）。请在其他SGDS导入之前加载CDN脚本——查看**sgds-components sidebar参考文档**获取CDN标签和框架设置说明。

→ Read reference/login.md

→ 阅读 reference/login.md

Centered card with email/password form. Use for authentication, sign-in, sign-up pages.

居中卡片式邮箱/密码表单。适用于认证、登入、注册页面。

→ Read reference/form.md

→ 阅读 reference/form.md

Two-column settings layout with labelled form sections. Use for settings pages, profile pages, multi-section data entry.

带标签表单区块的双列设置布局。适用于设置页面、个人资料页、多区块数据录入场景。

→ Read reference/about-us.md

→ 阅读 reference/about-us.md

Two-column headline + image grid + logo strip + achievements stats panel. Use for agency profiles, product about pages, team introductions.

双列标题 + 图片网格 + Logo条 + 成果统计面板。适用于机构简介、产品关于页、团队介绍。

→ Read reference/landing.md

→ 阅读 reference/landing.md

Hero section + feature cards + CTA sections. Use for product launches, service introductions, campaign pages.

英雄区块 + 功能卡片 + 号召性用语区块。适用于产品发布、服务介绍、活动推广页面。

→ Read reference/blog.md

→ 阅读 reference/blog.md

Featured image + article header + body content + author card. Use for blog posts, news articles, case studies, testimonials.

特色图片 + 文章标题 + 正文内容 + 作者卡片。适用于博客文章、新闻报道、案例研究、客户证言。

Raw Content Links — Copy & Paste Ready

原始内容链接 — 可直接复制粘贴

All page templates have working implementations in the

stories/templates/

directory. Use these raw GitHub links to fetch the complete source:

Template	Story Folder	Story File	Raw URL
Application Management	ApplicationManagement	applications-list.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/ApplicationManagement/applications-list.stories.js
Catalogue / Search & Filter	Catalogue	search-filter.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Catalogue/search-filter.stories.js
Dashboard	ApplicationManagement	applications-list.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/ApplicationManagement/applications-list.stories.js
About Us	AboutUs	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
Form - Basic	Form	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/basic.stories.js
Form - Multi-Step	Form	multi-step-form.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/multi-step-form.stories.js
Form - Report Issue	Form	report-issue.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/report-issue.stories.js
Blog / Content	Blog	success-story.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Blog/success-story.stories.js
Landing Page	Landing	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Landing/basic.stories.js
Login	Form	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/basic.stories.js

Each reference page (e.g., reference/dashboard.md) includes the relevant raw content links for that specific template.

所有页面模板在

stories/templates/

目录下都有可运行的实现。使用以下GitHub原始链接获取完整源代码：

模板	故事文件夹	故事文件	原始URL
应用管理	ApplicationManagement	applications-list.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/ApplicationManagement/applications-list.stories.js
目录/搜索与筛选	Catalogue	search-filter.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Catalogue/search-filter.stories.js
仪表盘	ApplicationManagement	applications-list.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/ApplicationManagement/applications-list.stories.js
关于我们	AboutUs	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
表单 - 基础版	Form	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/basic.stories.js
表单 - 多步骤	Form	multi-step-form.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/multi-step-form.stories.js
表单 - 问题反馈	Form	report-issue.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/report-issue.stories.js
博客/内容	Blog	success-story.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Blog/success-story.stories.js
着陆页	Landing	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Landing/basic.stories.js
登录页	Form	basic.stories.js	https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/Form/basic.stories.js

每个参考页面（如reference/dashboard.md）都包含对应模板的相关原始内容链接。

How to Extract HTML from Raw GitHub Links

如何从GitHub原始链接提取HTML

All templates have working story implementations in the

stories/templates/

directory. To extract the HTML template:

所有模板在

stories/templates/

目录下都有可运行的Story实现。提取HTML模板的步骤如下：

Step 1: Fetch the raw file

步骤1：获取原始文件

Copy the raw GitHub URL from the table above and fetch it:

bash

curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/{FOLDER}/{FILE}.js

Example:

bash

curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js

复制上表中的GitHub原始链接并获取文件：

bash

curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/{FOLDER}/{FILE}.js

示例：

bash

curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js

Step 2: Extract the HTML from the template literal

步骤2：从模板字面量中提取HTML

Story files export a

Template

function that returns an

html

template literal. Locate the section that looks like:

javascript

const Template = () => html`
  <!-- YOUR HTML STARTS HERE -->
  <sgds-masthead></sgds-masthead>
  ...
  <sgds-footer></sgds-footer>
  <!-- YOUR HTML ENDS HERE -->
`;

Story文件会导出一个

Template

函数，返回一个

html

模板字面量。找到如下所示的区块：

javascript

const Template = () => html`
  <!-- YOUR HTML STARTS HERE -->
  <sgds-masthead></sgds-masthead>
  ...
  <sgds-footer></sgds-footer>
  <!-- YOUR HTML ENDS HERE -->
`;

Step 3: Clean the HTML

步骤3：清理HTML

**Remove the
```
html\`` wrapper** — delete the leading 
```
html`` and trailing closing backtick
Remove Lit-specific syntax — delete any
```
${variable}
```
interpolations; replace with placeholder text if needed
Remove
<style>
blocks — move CSS to the reference file's "Customisation notes" section if notable
Preserve all SGDS components and utility classes — keep every
```
sgds-*
```
element and
```
sgds:
```
class exactly as-is
Format the HTML — use consistent indentation (2 spaces per level)

**移除
```
html\``包裹** — 删除开头的
```
html``和结尾的反引号
移除Lit特定语法 — 删除所有
```
${variable}
```
插值；如有需要，替换为占位文本
移除
<style>
区块 — 如果内容重要，将CSS移至参考文件的“自定义说明”部分
保留所有SGDS组件和工具类 — 完全保留每个
```
sgds-*
```
元素和
```
sgds:
```
类
格式化HTML — 使用统一的缩进（每级2个空格）

Step 4: Structure the reference file

步骤4：构建参考文件

Follow the sgds-blocks pattern:

markdown

undefined

遵循sgds-blocks的格式：

markdown

undefined

[Template Name] Page Template

[模板名称] 页面模板

[1-2 sentence description of what this template is for]

[1-2句话描述该模板的用途]

When to use

使用场景

Use case 1
Use case 2
Use case 3

使用场景1
使用场景2
使用场景3

Block anatomy

区块结构

``` [ASCII diagram of the layout structure] ```

``` [布局结构的ASCII示意图] ```

Complete template

完整模板

```html [CLEANED HTML FROM STEP 3] ```

```html [步骤3中清理后的HTML] ```

Customisation notes

自定义说明

Update [element] to [purpose]
Modify [component] by [how]
[More notes...]

更新[元素]以实现[目的]
通过[方式]修改[组件]
[更多说明...]

Raw Content Link

原始内容链接

File	GitHub Raw URL
[Template Name]	[raw GitHub URL]

undefined

文件	GitHub原始URL
[模板名称]	[GitHub原始URL]

undefined

Example: About Us template

示例：关于我们模板

The raw file at:

https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js

Contains:

javascript

const Template = () => html`
  <style>...</style>
  <sgds-masthead></sgds-masthead>
  ...
`;

Extract → remove

html\`` and backtick → clean up

原始文件地址：

https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js

包含内容：

javascript

const Template = () => html`
  <style>...</style>
  <sgds-masthead></sgds-masthead>
  ...
`;

提取 → 移除

html\``和反引号 → 清理

Visual Hierarchy Principles (apply to all templates)

视觉层次原则（适用于所有模板）

These are the rules that make SGDS UIs look polished — the same principles shadcn/Mantine use:

1. Layer backgrounds to create depth

Page background:
```
sgds:bg-surface-default
```
(the base canvas)
Cards / panels:
```
sgds:bg-surface-raised
```
(lifts content off the page)
Nested content areas:
```
sgds:bg-surface-overlay
```
sparingly

2. Use semantic spacing, not raw numbers Prefer

sgds:p-layout-md

sgds:gap-layout-md

sgds:p-component-md

over

sgds:p-4

. Semantic tokens are responsive and encode intent. Always apply whitespace between sections and elements — never render blocks without spacing. See sgds-utilities-spacing for the full defaults table.

3. Consistent card anatomy Every card: padding inside (

sgds:p-component-lg

), gap between card rows (

sgds:gap-layout-md

), border-radius (

sgds:rounded-lg

), subtle shadow (

sgds:shadow-card

4. Action hierarchy in forms Primary action →

<sgds-button variant="primary">

. Secondary / cancel →

<sgds-button variant="outline">

. Destructive →

<sgds-button variant="ghost" tone="danger">

5. Subtle labels, prominent values In stat cards and description lists: label in

sgds:text-body-subtle sgds:text-sm

, value in

sgds:text-default sgds:text-2xl sgds:font-semibold

这些规则让SGDS界面看起来更精致——与shadcn/Mantine使用的原则一致：

1. 通过分层背景营造深度

页面背景：
```
sgds:bg-surface-default
```
（基础画布）
卡片/面板：
```
sgds:bg-surface-raised
```
（让内容从页面中凸显）
嵌套内容区域：谨慎使用
```
sgds:bg-surface-overlay
```

2. 使用语义化间距，而非原始数值 优先使用

sgds:p-layout-md

、

sgds:gap-layout-md

、

sgds:p-component-md

，而非

sgds:p-4

。语义化令牌具有响应式特性，且能传达设计意图。务必在区块和元素之间添加空白——绝对不要无间距地渲染区块。 查看sgds-utilities-spacing获取完整默认值表格。

3. 统一的卡片结构 每张卡片：内部填充（

sgds:p-component-lg

）、卡片行之间的间距（

sgds:gap-layout-md

）、圆角（

sgds:rounded-lg

）、柔和阴影（

sgds:shadow-card

）。

4. 表单中的操作层级 主操作 →

<sgds-button variant="primary">

。次要/取消操作 →

<sgds-button variant="outline">

。破坏性操作 →

<sgds-button variant="ghost" tone="danger">

。

5. 标签弱化，数值突出 在统计卡片和描述列表中：标签使用

sgds:text-body-subtle sgds:text-sm

，数值使用

sgds:text-default sgds:text-2xl sgds:font-semibold

。