Footer

Last updates - 10 Dec 2018

• Remove duplicate footer tag

Footer is a standard component that all '.gov.sg' websites must adopt for every page in them

Basic footer that do not need quick links.

Show code snippet
<footer class="sgds-footer top-section">
    <div class="sgds-container is-fluid">
        <div class="row">
            <div class="col header">
                <h5 class="sub-header has-text-white"><b>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="">Contact</a></p>
                    </li>
                    <li class="is-inline-block-desktop-only">
                        <p><a href="">Tell us more</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row is-vcentered divider">
            <div class="col">
                <ul>
                    <li><a href="">Privacy Statement</a></li>
                    <li><a href="">Terms of Use</a></li>
                </ul>
            </div>
            <div class="col has-text-right-desktop has-text-right-tablet has-text-left-mobile">
                <p> © 2018 Government of Singapore</p>
            </div>
        </div>
    </div>
</footer>

For footer that has quick links, you can have up to six columns for categories.

Show code snippet
<footer class="sgds-footer top-section">
    <div class="sgds-container is-fluid">
        <div class="row">
            <div class="col header">
                <h5 class="sub-header has-text-white"><b>Design System</b></h5>
            </div>
        </div>
        <div class="row">
            <div class="col is-3">
                <p class="sub-header"><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="sub-header"><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="">Contact</a></p>
                    </li>
                    <li class="is-inline-block-desktop-only">
                        <p><a href="">Tell us more</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row is-vcentered divider">
            <div class="col">
                <ul>
                    <li><a href="">Privacy Statement</a></li>
                    <li><a href="">Terms of Use</a></li>
                </ul>
            </div>
            <div class="col has-text-right-desktop has-text-right-tablet has-text-left-mobile">
                <p> © 2018 Government of Singapore</p>
            </div>
        </div>
    </div>
</footer>

For footer that needs a short product info, you can park it in the first column.

Show code snippet
<footer class="sgds-footer top-section">
    <div class="sgds-container is-fluid">
        <div class="row">
            <div class="col header">
                <h5 class="sub-header has-text-white"><b>Design System</b></h5>
            </div>
        </div>
        <div class="row">
            <div class="col is-4">
                <small class="has-text-white">Unites Singapore Government Digital Services around a common UI language and user experience</small>
            </div>
        </div>
        <div class="row">
            <div class="col is-right-desktop-only">
                <ul>
                    <li class="is-inline-block-desktop-only">
                        <p><a href="">Contact</a></p>
                    </li>
                    <li class="is-inline-block-desktop-only">
                        <p><a href="">Tell us more</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row is-vcentered divider">
            <div class="col">
                <ul>
                    <li><a href="">Privacy Statement</a></li>
                    <li><a href="">Terms of Use</a></li>
                </ul>
            </div>
            <div class="col has-text-right-desktop has-text-right-tablet has-text-left-mobile">
                <p> © 2018 Government of Singapore</p>
            </div>
        </div>
    </div>
</footer>

Guidelines

Footer should:

  • Be positioned at the bottom of every page in the digital service
  • Contain the 'Privacy Statement' and 'Terms of Use' on the left hand corner of the Footer Panel
  • Contain the 'Feedback' if there is a feedback form
  • Contain the 'Rate this Service' if there is a customer satisfaction poll
  • Contain the Copyright Statement in the format '© [current year in YYYY] Government of Singapore' on the bottom right hand side of the Footer Panel

Feedback

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

Tell us more