Overview
Contains supporting information for your service at the bottom of your website.
Usage
All .gov.sg digital services shall contain a Global Footer Bar across all pages.
The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
Types
1) Basic example
<footer class='sgds-footer'>
<div class="top-section">
<div class="sgds-container is-fluid">
<div class="row">
<div class="col">
<h5 class="has-text-white"><b>Singapore Government Design System</b></h5>
</div>
</div>
<div class="row">
<div class="col is-right-desktop-only">
<ul>
<li class="is-inline-block-desktop-only">
<p><a href="" target="_blank">Contact</a></p>
</li>
<li class="is-inline-block-desktop-only">
<p><a href="" target="_blank">Feedback</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bottom-section">
<div class="sgds-container is-fluid">
<div class="row is-multiline">
<div class="col is-12">
<ul>
<li>
<a href="https://tech.gov.sg/report_vulnerability" target="_blank">Report Vulnerability</a>
</li>
<li><a href="">Privacy</a></li>
<li><a href="">Terms of Use</a></li>
</ul>
</div>
<div class="col is-12 has-text-right-desktop has-text-right-tablet has-text-left-mobile">
<p class="is-hidden-touch"> © 2024 Government of Singapore. Last Updated
04 Jan 2024</p>
<p class="is-hidden-desktop">© 2024 Government of Singapore</p>
<p class="is-hidden-desktop last-updated">Last Updated 04 Jan 2024</p>
</div>
</div>
</div>
</div>
</footer>2) Include columns in footer
We advise that you avoid using more than 6 columns of footer links.
<footer class='sgds-footer'>
<div class="top-section">
<div class="sgds-container is-fluid">
<div class="row">
<div class="col">
<h5 class="has-text-white"><b>Singapore Government Design System</b></h5>
</div>
</div>
<div class="row">
<div class="col is-3">
<p class="has-text-white"><b>Category 1</b></p>
<p><a href="">Link</a></p>
<p><a href="">Link</a></p>
</div>
<div class="col is-3">
<p class="has-text-white"><b>Category 2</b></p>
<p><a href="">Link</a></p>
<p><a href="">Link</a></p>
</div>
</div>
<div class="row">
<div class="col is-right-desktop-only">
<ul>
<li class="is-inline-block-desktop-only">
<p><a href="" target="_blank">Contact</a></p>
</li>
<li class="is-inline-block-desktop-only">
<p><a href="" target="_blank">Feedback</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bottom-section">
<div class="sgds-container is-fluid">
<div class="row is-multiline">
<div class="col is-12">
<ul>
<li>
<a href="https://tech.gov.sg/report_vulnerability" target="_blank">Report Vulnerability</a>
</li>
<li><a href="">Privacy</a></li>
<li><a href="">Terms of Use</a></li>
</ul>
</div>
<div class="col is-12 has-text-right-desktop has-text-right-tablet has-text-left-mobile">
<p class="is-hidden-touch"> © 2024 Government of Singapore. Last Updated
04 Jan 2024</p>
<p class="is-hidden-desktop">© 2024 Government of Singapore</p>
<p class="is-hidden-desktop last-updated">Last Updated 04 Jan 2024</p>
</div>
</div>
</div>
</div>
</footer>3) Include description in footer
We recommend that you use the 1st column to present a brief description of your website.
<footer class='sgds-footer'>
<div class="top-section">
<div class="sgds-container is-fluid">
<div class="row">
<div class="col">
<h5 class="has-text-white"><b>Singapore Government Design System</b></h5>
</div>
</div>
<div class="row">
<div class="col is-4">
<p>Unites Singapore Government Digital Services around a common UI language and user experience
</p>
</div>
</div>
<div class="row">
<div class="col is-right-desktop-only">
<ul>
<li class="is-inline-block-desktop-only">
<p><a href="" target="_blank">Contact</a></p>
</li>
<li class="is-inline-block-desktop-only">
<p><a href="" target="_blank">Feedback</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bottom-section">
<div class="sgds-container is-fluid">
<div class="row is-multiline">
<div class="col is-12">
<ul>
<li>
<a href="https://tech.gov.sg/report_vulnerability" target="_blank">Report Vulnerability</a>
</li>
<li><a href="">Privacy</a></li>
<li><a href="">Terms of Use</a></li>
</ul>
</div>
<div class="col is-12 has-text-right-desktop has-text-right-tablet has-text-left-mobile">
<p class="is-hidden-touch"> © 2024 Government of Singapore. Last Updated
04 Jan 2024</p>
<p class="is-hidden-desktop">© 2024 Government of Singapore</p>
<p class="is-hidden-desktop last-updated">Last Updated 04 Jan 2024</p>
</div>
</div>
</div>
</div>
</footer>Guidelines
Footers should:
- Be positioned at the bottom of every page.
- Contain a ' Report Vulnerability' link on the bottom left corner
- Contain links to 'Privacy' and 'Terms of Use' pages on the bottom left corner
- Contain a 'Feedback' link, if there are feedback channels
- Contain a 'Rate this Service' link, if the website is collecting customer satisfaction statistics
- Contain the Copyright Statement in the format '© [current year in YYYY] Government of Singapore' on the bottom right corner of the footer panel
- Contain the Last Updated Statement in the format 'Last Updated [DD CurrentMonth YYYY]' on the bottom right corner of the footer panel
Can't find a component?
Let us know what you need and we’ll be happy to look into it