Masthead

Last updates - 6 May 2019

• Added language selector example

Masthead is a standard component that all '.gov.sg' websites must adopt for every page in them
Show code snippet
<div class="sgds-masthead">
    <div class="sgds-container">
        <div class="row">
            <div class="col has-text-centered-touch">
                <a href="https://www.gov.sg" target="_blank">
                    <span class="sgds-icon sgds-icon-sg-crest is-size-4"></span>
                    <span class="is-text">A Singapore Government Agency Website</span>
                </a>
            </div>
        </div>
    </div>
</div>

If you require a language selector, it can be added at the extreme right of the masthead component.

  • 中文
  • Bahasa Melayu
  • தமிழ்
Show code snippet
<div class="sgds-masthead">
    <div class="sgds-container">
        <div class="row is-mobile">
            <div class="col is-9">
                <a href="http://www.gov.sg" alt="Singapore Government" target="_blank">
                    <span class="sgds-icon sgds-icon-sg-crest is-size-4"></span>
                    <span class="is-text">A Singapore Government Agency Website</span>
                </a>
            </div>
            <div class="col is-flex has-text-right language_selector">
                English
            </div>
        </div>
    </div>
    <div class="language_selector--dropdown">
        <ul>
            <li>中文</li>
            <li>Bahasa Melayu</li>
            <li>தமிழ்</li>
        </ul>
    </div>
</div>
            

Guidelines

Masthead should:

  • Contain the Singapore Government Online Logo, which shall be positioned at the top left hand corner of the banner
  • Include the official government site descriptor, which shall state, 'A Singapore Government Agency Website'
  • Be positioned at the top-most 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.

Tell us more