All .gov.sg digital services shall contain adopt 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


Basic example

Show code snippet
<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"> © 2019 Government of Singapore. Last Updated 21 Oct 2019</p>
                    <p class="is-hidden-desktop">© 2019 Government of Singapore</p>
                    <p class="is-hidden-desktop last-updated">Last Updated 21 Oct 2019</p>
                </div>
            </div>
        </div>
    </div>
</footer>

You should have no more than six columns of footer links.

Show code snippet
    <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"> © 2019 Government of Singapore. Last Updated 21 Oct 2019</p>
                        <p class="is-hidden-desktop">© 2019 Government of Singapore</p>
                        <p class="is-hidden-desktop last-updated">Last Updated 21 Oct 2019</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

The first column can be used 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

© 2019 Government of Singapore. Last Updated 21 Oct 2019

© 2019 Government of Singapore

Last Updated 21 Oct 2019

Show code snippet
<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"> © 2019 Government of Singapore. Last Updated 21 Oct 2019</p>
                    <p class="is-hidden-desktop">© 2019 Government of Singapore</p>
                    <p class="is-hidden-desktop last-updated">Last Updated 21 Oct 2019</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