sgds-patterns

Catalog reusable SGDS typography patterns with raw HTML templates.

18|10|Updated Aug 30, 2022

Search Tags:#typography #ui #patterns #paragraphs #lists #headings #sgds

Ready to run

npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sgds-patterns
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-patterns
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Centralizes a library of reusable SGDS typography patterns to ensure consistent text styling and faster UI development across applications.

Core Features & Use Cases

Comprehensive catalog of patterns for Headings (H1–H6), Display typography, Content headers, Lists, and Paragraphs.
Each pattern links to the raw HTML template for quick integration into SGDS projects.
Enables cross-project typography consistency and rapid pattern reuse with easy adaptation to content.

Quick Start

Select a pattern reference from the references folder, then copy its raw HTML template and adapt it to your content.

Frequently Asked Questions about sgds-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I ensure consistent typography for headings and paragraphs across multiple SGDS projects?▼

Use a centralized catalog of reusable SGDS typography patterns to ensure consistent text styling for headings, paragraphs, and lists across multiple SGDS projects. It provides ready-to-use HTML templates for rapid UI pattern reuse.

What is the best way to apply consistent SGDS display typography and content headers in my UI?▼

The best way to apply SGDS display typography and content headers is by selecting a pattern reference and copying its raw HTML template. This ensures your UI matches standard SGDS text styling without manual CSS adjustments.

Do I need any prerequisites to use the SGDS typography patterns library?▼

Yes, you need prerequisites including sgds-getting-started, sgds-utilities, and sgds-components. These foundational SGDS tools must be set up in your environment before integrating the typography pattern templates.

Can I get raw HTML templates for H1 to H6 headings from the SGDS pattern catalog?▼

Yes, the SGDS pattern catalog provides comprehensive raw HTML templates specifically for H1 to H6 headings, display typography, content headers, lists, and paragraphs. Each pattern links directly to its raw HTML template for quick integration.

How do I integrate SGDS typography patterns into my application code?▼

To integrate SGDS typography patterns, select a pattern reference from the references folder, copy its raw HTML template, and adapt the copied template to your specific content. This enables rapid pattern reuse across your SGDS applications.