SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

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"> © 2022 Government of Singapore. Last Updated
                        29 Jul 2022</p>
                    <p class="is-hidden-desktop">© 2022 Government of Singapore</p>
                    <p class="is-hidden-desktop last-updated">Last Updated 29 Jul 2022</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"> © 2022 Government of Singapore. Last Updated
                        29 Jul 2022</p>
                    <p class="is-hidden-desktop">© 2022 Government of Singapore</p>
                    <p class="is-hidden-desktop last-updated">Last Updated 29 Jul 2022</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.

Singapore Government Design System

Unites Singapore Government Digital Services around a common UI language and user experience

© 2022 Government of Singapore. Last Updated 29 Jul 2022

© 2022 Government of Singapore

Last Updated 29 Jul 2022

<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"> © 2022 Government of Singapore. Last Updated
                        29 Jul 2022</p>
                    <p class="is-hidden-desktop">© 2022 Government of Singapore</p>
                    <p class="is-hidden-desktop last-updated">Last Updated 29 Jul 2022</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

Request component