Footer

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

© 2020 Government of Singapore. Last Updated 15 Sep 2020

© 2020 Government of Singapore

Last Updated 15 Sep 2020

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

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team