govtechsg/sgds-layouts
skills/sgds-layouts/SKILL.md
Complete catalog of page layout patterns for SGDS applications. Use this skill whenever a user asks about page layouts, content arrangement, aside panels, split views, sidebar layouts, breadcrumb layouts, or viewport-height layouts — even if they just say 'how should I lay out my page' or 'I need a two-column layout'. Covers Full Width layouts (public-facing pages with sgds-container) and With Sidebar layouts (dashboards/internal tools with sgds-container-sidebar). Trigger on: layout, aside, split view, sidebar layout, two-column, three-column, content arrangement, page structure with aside.
$ install --global
skillsauthnpx skillsauth add govtechsg/sgds-web-component sgds-layoutsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 14, 2026, 7:10 AM145.0s3 files scanned
SKILL.md
- name:
- sgds-layouts
- description:
- Complete catalog of page layout patterns for SGDS applications. Use this skill whenever a user asks about page layouts, content arrangement, aside panels, split views, sidebar layouts, breadcrumb layouts, or viewport-height layouts — even if they just say 'how should I lay out my page' or 'I need a two-column layout'. Covers Full Width layouts (public-facing pages with sgds-container) and With Sidebar layouts (dashboards/internal tools with sgds-container-sidebar). Trigger on: layout, aside, split view, sidebar layout, two-column, three-column, content arrangement, page structure with aside.
- author:
- singapore-design-system
- version:
- 0.0.0
- audience:
- external
- category:
- pattern
SGDS Layouts
Production-ready page layout patterns that define how content areas are arranged within the Application Shell. Each layout combines SGDS components and utilities to provide a structural starting point — drop in your content blocks and you have a complete page.
What is a layout?
A layout defines the spatial arrangement of content regions on a page:
- How many content columns exist (single, split, aside + main)
- Where navigation lives (top-only vs sidebar)
- How the page scrolls (document flow vs viewport-contained)
Layouts sit between the Application Shell (mandatory page chrome) and Blocks/Templates (the actual content). The shell wraps the layout; blocks fill the layout's content areas.
Prerequisites
Before implementing any layout, ensure you have:
- sgds-getting-started: Initial application setup (Inter font, foundation CSS imports, component registration)
- sgds-utilities: Understanding of SGDS utility classes (grid, spacing, flex, etc.)
- sgds-components: Knowledge of SGDS web components (masthead, mainnav, footer, sidebar)
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.
Quick Decision Guide
| What you're building | Layout category | Layout to use | |---|---|---| | Simple public-facing page, single content area | Full Width | Default | | Page with a left sidebar/aside panel (4/8 split) | Full Width | Aside Left | | Page with a right sidebar/aside panel (8/4 split) | Full Width | Aside Right | | Page with both left and right aside panels (3/6/3) | Full Width | Aside Both | | Two equal content panels side by side | Full Width | Split | | Page with breadcrumb navigation bar | Full Width | Breadcrumb | | Dashboard/internal tool, single content area | With Sidebar | Default | | Dashboard with left aside panel | With Sidebar | Aside Left | | Dashboard with right aside panel | With Sidebar | Aside Right | | Collapsible overlay sidebar with breadcrumb | With Sidebar | Overlay | | Dashboard with two equal content panels | With Sidebar | Split |
Two Layout Categories
Full Width — Public-facing pages
For general-purpose applications, public-facing digital services, and pages without persistent side navigation.
Key characteristics:
- Uses
.sgds-containerfor centred, responsive content - Standard
<sgds-masthead>,<sgds-mainnav>,<sgds-footer> - Content flows with the document (no viewport containment)
- Grid-based aside panels use
.sgds-gridwithsgds-col-*classes
→ Read reference/full-width.md for all 6 Full Width layout variants.
With Sidebar — Dashboards and internal tools
For internal tools, dashboards, admin portals, and transactional apps that need persistent side navigation alongside the main content.
Key characteristics:
- Uses
.sgds-container-sidebarfor narrower content (accounts for sidebar width) fluidattribute on<sgds-masthead>and<sgds-mainnav><sgds-sidebar>component for persistent navigation<sgds-footer tone="neutral" layout="sidebar">for sidebar-aware footer- Viewport-height containment:
sgds:h-screen sgds:flex sgds:flex-col sgds:overflow-hidden - Main content area scrolls independently:
sgds:overflow-y-auto
→ Read reference/with-sidebar.md for all 5 With Sidebar layout variants.
How to Extract HTML from Raw GitHub Links
All layouts have working story implementations in the stories/layouts/ directory. To use them:
Step 1: Fetch the raw file
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/layouts/{Category}/{File}.stories.js
Step 2: Extract the HTML from the template literal
Story files export a Template function that returns an html template literal:
const Template = () => html`
<!-- YOUR HTML STARTS HERE -->
<sgds-masthead></sgds-masthead>
...
<sgds-footer></sgds-footer>
<!-- YOUR HTML ENDS HERE -->
`;
Step 3: Clean the HTML
- Remove the `html`` wrapper and trailing backtick
- Remove Lit-specific syntax (
${variable}interpolations) — replace with inline HTML - Remove
<style>blocks (these are just for Storybook placeholders) - Preserve all SGDS components and utility classes exactly as-is
- Format with consistent indentation (2 spaces)
For AI agents
Workflow
- Load
sgds-utilitiesskill (for utility class reference) - Load
sgds-componentsskill (for component APIs) - Load this skill
- Read the appropriate reference file based on the user's needs
- Fetch the raw GitHub story file if you need the complete implementation
- Adapt the layout to the user's content
Guidelines
- Every layout includes the mandatory Application Shell (
<sgds-masthead>,<sgds-mainnav>,<sgds-footer>) - Do not mix Full Width and With Sidebar patterns — pick one based on the use case
- For sidebar layouts, always include the viewport-containment classes on the root wrapper
- Populate aside panels and content areas with blocks from sgds-blocks or templates from sgds-templates
Related Skills
govtechsg/sgds-components
tools
VerifiedTrustedCommunity
Complete reference for all SGDS web components including installation and framework integration. Use when users ask about any <sgds-*> component — accordion, alert, badge, breadcrumb, button, card, checkbox, close-button, combo-box, datepicker, description-list, divider, drawer, dropdown, file-upload, footer, icon, icon-button, icon-card, icon-list, image-card, input, link, mainnav, masthead, modal, overflow-menu, pagination, progress-bar, quantity-toggle, radio, select, sidebar, sidenav, skeleton, spinner, stepper, subnav, switch, system-banner, tab, table, table-of-contents, textarea, thumbnail-card, toast, or tooltip. Also covers React 19+, React ≤18, Vue, Angular, and Next.js integration.
14SKILL.mdUpdated Apr 18, 2026
govtechsg/sgds-forms
testing
VerifiedTrustedCommunity
Use this skill when users ask about form validation in SGDS, hasFeedback prop, constraint validation, custom validation, noValidate, setInvalid, form submission, or reading FormData from SGDS form components.
13SKILL.mdUpdated Apr 18, 2026
govtechsg/sgds-templates
tools
VerifiedTrustedCommunity
Complete ready-to-use page templates built with SGDS components and utilities. Use this skill whenever a user asks to build a page, dashboard, login page, form page, settings page, list page, or any full-page UI — even if they don't say 'template'. Apply when starting a new app, building internal tools, dashboards, admin portals, authentication flows, or data table views.
12SKILL.mdUpdated Apr 28, 2026
govtechsg/sgds-patterns
development
VerifiedTrustedCommunity
Complete catalog of reusable typography and text patterns for SGDS applications. Use this skill whenever the user needs to style text, create typography hierarchies, format headings, style lists, or needs consistent text layouts. Also use when the user mentions headings, page titles, body text, lists, paragraphs, display text, content headers, or any typography styling — even if they just say "make a nice heading" or "style my text". Current patterns include headings (H1-H6), display typography (large prominent text), content headers, lists (ordered and unordered), and paragraphs. Each pattern links directly to the raw HTML template for implementation.
12SKILL.mdUpdated Apr 28, 2026