Some features from this component may require sgds.js

The Masthead is a standard component that has to be present in all pages of '.gov.sg' websites.


Show code snippet
<div class="sgds-masthead">
    <div class="sgds-container">
        <div class="row">
            <div class="col">
                <a href="https://www.gov.sg" target="_blank">
                    <span class="sgds-icon sgds-icon-sg-crest"></span>
                    <span class="is-text">A Singapore Government Agency Website</span>
                </a>
            </div>
        </div>
    </div>
</div>

If you require a language selector, add it to the extreme right of the masthead component.

To include the language selector, please import sgds.js.

Show code snippet
<div class="sgds-masthead">
    <div class="sgds-container">
        <div class="row is-mobile">
            <div class="col is-9-desktop is-12-mobile is-flex">
                <a href="https://www.gov.sg" target="_blank">
                    <span class="sgds-icon sgds-icon-sg-crest"></span>
                    <span class="is-text">A Singapore Government Agency Website</span>
                </a>
            </div>
            <div class="col has-text-right is-hidden-mobile">
                <select class="language-selector" id="lang-selector">
                    <option>English</option>
                    <option>中文</option>
                    <option>Bahasa Melayu</option>
                    <option>தமிழ்</option>
                </select>
            </div>
        </div>
    </div>
</div>
The Masthead language selector should be hidden in mobile view to prevent clashing with the masthead text. However, it should still be accessible in the navigation panel. For example, include the language selector in the main navigation and display it only on mobile views.

Guidelines

The Masthead should:

  • Contain the Singapore Government Logo, which shall be positioned at the top left corner of the banner
  • Include the official government site descriptor, which shall state 'A Singapore Government Agency Website'
  • Be positioned at the top left corner of the web page

Feedback

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

Chat with the team