Get startedFoundationsComponentsTemplatesBlocksAIStories
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Footer

The footer contains supporting information for your service at the bottom of your website.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Meet service requirements

Use the footer to provide service details, contact links, privacy, and terms.

Offer a consistent endpoint

Place the footer across pages so supporting information is always easy to find.

Support trust

A standard footer reinforces that the service belongs to the Singapore Government.

Anatomy

Site title

Site description

[Slot]
1

Site title (optional)

2

Site description (optional)

3

Slot (optional)

4

Footer navigation

5

Divider

6

Copyright notice

Configuration

Device

Footer layout responds to the available viewport width. Use the device presets to check how links and copyright wrap across common breakpoints.

144012801024768512320
Site title Site description
[Slot]

Large desktop width. Footer content has the most horizontal space.

Contact information

Provide contact and feedback links so users can reach the service team. Both fields accept a URL.

Service Name A short description of the service.

Recommended for all .gov.sg services so users can reach support and submit feedback.

Optional links

FAQ and sitemap links are optional. Add them when they help users navigate the service.

Service Name

Minimum compliant footer with the mandatory privacy and terms links only.

Grouped link sections

Use the items slot with sgds-footer-item to group related links under titled columns.

Service Name A short description of the service.

Compact footer suitable for small services with few outbound links.

Tone

Footer tone controls whether the footer uses a neutral or fixed dark surface.

Use neutral footer tone in standard light layouts.

Layout

Footer layout supports standard page footers and sidebar application shells.

Use the default layout for full-width pages.

Structure

Example service Supporting information for the service.

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedPaddingsgds-padding-none—Left and right padding of the footer top and footer bottomsgds-padding-2-xl32pxTop and bottom padding of the footer top (320px breakpoint)sgds-padding-2-xl32pxTop and bottom padding of the footer bottomGapsgds-gap-2-xl—Spacing between items of the footer top (320px, 512px, and 768px breakpoints)sgds-gap-lg20pxSpacing between items of the footer itemssgds-gap-md16pxSpacing between items of the footer items; spacing between items of the footer bottomsgds-gap-sm12pxSpacing between items of the footer header; spacing between items of the ulsgds-gap-xl—Spacing between items of the footer mandatory links; spacing between items of the ulsgds-gap-xs8pxSpacing between items of the linksMarginsgds-margin-none—Value of the content; outer spacing of the contentsgds-margin-xs—Outer spacing of the footer itemBordersgds-border-width-11pxBottom border of the footer topTypographysgds-font-size-14—Font size of the footer copyrightssgds-font-size-label-sm—Font size of the mandatory footer linkssgds-font-size-heading-md—Font size of the footer titlesgds-font-weight-regular—Font weight alias used by footer item titlessgds-font-weight-semibold—Value of the content; font weight of the contentsgds-letter-spacing-tight—Letter spacing of the contentsgds-line-height-2-xsHeight variesLine height of the footer copyrightssgds-line-height-mdHeight variesLine height of the footer titlesgds-paragraph-spacing-xl—Paragraph spacing reset used by footer item titlesOutlinesgds-outline-focus—Focus outline of the content when keyboard-focused; focus outline of the link when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the content when keyboard-focused; focus-outline offset of the link when keyboard-focused

Usage

When to use

  • Use footer for persistent supporting links and organisational information at the end of the page.
  • Use it for secondary actions and reference content, not primary task content.

When not to use

  • Do not move primary task actions or critical page guidance into the footer.
  • Do not overload the footer with too many competing link groups.

Best practices

Example service A short description of the service.
Include the mandatory legal links

All .gov.sg services must show privacy and terms of use links in the footer on every page.

Example service
Do not omit privacy and terms

Even compact footers must surface privacy and terms of use links to stay compliant with .gov.sg rules.

Example service About Our mission Careers Resources Guides Newsroom
Group related links under titled sections

Use sgds-footer-item to group destinations under clear headings so users can scan by topic.

Example service Apply now Start your application
Do not use the footer for primary actions

The footer is for supporting information. Place primary calls to action in the page body or main nav.

Accessibility considerations

Built-in accessibility

  • Footers provide structured areas for site links and supporting information.
  • Footer links keep native link behaviour.

Labels and content

  • Use link text that matches the destination.
  • Group related footer links under clear headings.

Focus and interaction

  • Users should be able to tab through footer links in a predictable order.
  • Avoid adding non-link text that looks like a link.

Keyboard interaction

KeyInteractionTabMoves focus from the footer link to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused footer link.

Updates

DateVersionDescription13 May 2026v3.19.0Neutral tone and layout prop in #657.12 Mar 2026v3.14.0Replace container query with media query to resolve responsive issue in #563.22 Dec 2025v3.6.4Make sitemap and faq optional in #498.17 Oct 2025v3.5.4Update footer to new DSS standards in #441.06 Oct 2025v3.5.0Link and icon alignment in #361.

Roadmap

Planned itemStatusTargetFuture enhancements for footerPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/footer

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2