sgds-blocks

Compose SGDS page layouts using reusable UI blocks with sgds-templates.

18|10|Updated Aug 30, 2022

Search Tags:#design-system #web-components #page-layout #sgds-blocks #ui-blocks #sgds-templates

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

sgds-blocks provide a library of reusable UI blocks to speed SGDS page creation and ensure design-system usage across pages and templates.

Core Features & Use Cases

Drop-in blocks for masthead, hero, cards, CTAs, forms, and more that can be composed into full pages without writing layout code from scratch.
Works with sgds-templates to assemble page layouts and sections quickly.
Encourages consistent styling using sgds CSS utilities and SGDS components.

Quick Start

Install and import sgds-blocks in your project, then start dropping SGDS blocks into your templates.

Frequently Asked Questions about sgds-blocks

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

FAQPage Schema

How do I compose SGDS page layouts using reusable UI blocks?▼

You compose SGDS page layouts by dropping in pre-built UI blocks for mastheads, heroes, and cards into your templates. This allows you to assemble full landing pages and dashboards quickly without writing layout code from scratch.

Can I use drop-in UI blocks to build SGDS documentation pages and forms?▼

Yes, drop-in UI blocks can be used to build SGDS documentation pages and forms. The library provides reusable components specifically designed to speed up page creation while ensuring consistent design-system styling across all templates.

Do I need sgds-templates to assemble page sections with sgds-blocks?▼

Yes, sgds-blocks works directly with sgds-templates to assemble page layouts and sections. The blocks are designed to be composed within these templates to enforce consistent SGDS CSS utilities and component styling.

What is the best way to ensure consistent styling across multiple SGDS pages?▼

The best way to ensure consistent styling is to use reusable UI blocks that enforce SGDS CSS utilities and components. Composing pages from these standardized blocks eliminates manual layout coding and maintains design-system compliance.

Does sgds-blocks support custom scripts and asset resources for page sections?▼

Yes, sgds-blocks supports optional resources including custom scripts and assets. It enforces frontmatter-based discovery with name and description fields to correctly map these resources when building page sections.