Singapore Government Design System: Build your next best digital experience for Singapore

The footer contains supporting information for your service at the bottom of your website.
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.

Mandatory

React

Web Component

Example

            
        
               
                
                
                    
                        HTML
                    
                    
                    
                        React
                    
                    
                    
                    
                        Web Component
                    
                    
                    
                        <footer class="sgds footer">
    <section class="footer-top">
        <div class="container-fluid">
            <div class="row footer-header">
                <div class="col col-lg-6 col-md-12">
                    <div class="title">Singapore Government Design System</div>
                    <div class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum illo delectus laborum libero id
                        ratione quibusdam tempora assumenda quas, pariatur cum minus, aliquid molestiae et nisi dolorem
                        vitae molestias! Voluptate commodi aliquid iusto sequi sit eligendi, quod numquam nihil
                        consectetur eaque error earum laudantium! Temporibus accusamus pariatur quod totam quia.
                    </div>
                </div>
            </div>
            <div class="row footer-items">
                <div class="col-xxl-2 col-md-4 mb-3">
                    <div class="title">
                        Column 1
                    </div>
                    <ul class="links">
                        <li><a href="">About Us</a></li>
                        <li><a href="">This is a super long link</a></li>
                        <li><a href="">Test</a></li>
                        <li><a href="">Test</a></li>
                    </ul>
                </div>
                <div class="col-xxl-2 col-md-4 mb-3">
                    <div class="title">
                        Column 2
                    </div>
                    <ul class="links">
                        <li><a href="">About Us</a></li>
                        <li><a href="">This is a super long link</a></li>
                        <li><a href="">Test</a></li>
                        <li><a href="">Test</a></li>
                    </ul>
                </div>
                <div class="col-xxl-2 col-md-4 mb-3">
                    <div class="title">
                        Column 3
                    </div>
                    <ul class="links">
                        <li><a href="">About Us</a></li>
                        <li><a href="">This is a super long link</a></li>
                        <li><a href="">Test</a></li>
                        <li><a href="">Test</a></li>
                    </ul>
                </div>
                <div class="col-xxl-2 col-md-4 mb-3">
                    <div class="title">
                        Column 4
                    </div>
                    <ul class="links">
                        <li><a href="">About Us</a></li>
                        <li><a href="">This is a super long link</a></li>
                        <li><a href="">Test</a></li>
                        <li><a href="">Test</a></li>
                    </ul>
                </div>
                <div class="col-xxl-2 col-md-4 mb-3">
                    <div class="title">
                        Column 5
                    </div>
                    <ul class="links">
                        <li><a href="">About Us</a></li>
                        <li><a href="">This is a super long link</a></li>
                        <li><a href="">Test</a></li>
                        <li><a href="">Test</a></li>
                    </ul>
                </div>
                <div class="col-xxl-2 col-md-4 mb-3">
                    <div class="title">
                        Column 6
                    </div>
                    <ul class="links">
                        <li><a href="">About Us</a></li>
                        <li><a href="">This is a super long link</a></li>
                        <li><a href="">Test</a></li>
                        <li><a href="">Test</a></li>
                    </ul>
                </div>
            </div>
            <div class="row footer-contact-links">
                <div class="col">
                    <div class="d-flex justify-content-lg-end">
                        <ul>
                            <li><a href="">Contact</a></li>
                            <li><a href="">Feedback</a></li>
                            <li><a href="https://www.reach.gov.sg/" target="_blank"
                                    rel="noopener noreferrer">Reach.gov.sg</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="footer-bottom">
        <div class="container-fluid">
            <div class="row footer-mandatory-links">
                <div class="col">
                    <ul>
                        <li><a href="https://tech.gov.sg/report_vulnerability" target="_blank"
                                rel="noopener noreferrer">Report Vulnerability</a></li>
                        <li><a href="">Privacy Statement</a></li>
                        <li><a href="">Terms of use</a></li>
                    </ul>
                </div>
            </div>
            <div class="row footer-copyrights">
                <div class="col">
                    <div class="d-flex justify-content-lg-end text-end">
                        © 2022 Government of Singapore<br>
                        Last Updated 08 Feb 2022
                    </div>
                </div>
            </div>
        </div>
    </section>
</footer>
                    
                    
                        
                            View on React storybook
                        
                    
                    
                    
                    
                        View on Web component storybook
                    
                    
                
                
            

Anatomy

Name: Serves to inform the user of the name of your portal/digital service.
Description (situational): Serves to give users more information outside of the about page. E.g a snippet of the about us page.
Links (situational): Serves as a secondary navigation for users to navigate to different parts of your portal/digital service. Can also be used to house associated links. E.g sister portals/digital services.
Report vulnerability, Privacy and Terms of use: Serves to link users to the respective pages to find out more.
Contact, Feedback and link to REACH: Serves to link users to the respective pages to find out more.
Copyright and last updated: Serves to inform users when the portal/digital service was updated.

Spacing

Within the footer
Ensure that there is at least 32px spacing around the footer, at least 16px spacing between main elements and 48px spacing between the top and bottom half of the footer.

Last updated 02 October 2024

Example

Default Footer

See Code

Anatomy

Spacing