Official Government Banner

All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.

Mandatory

Example

HTML Web Component
<head>
    
    <script 
    type="module" 
    src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2/components/Masthead/index.umd.js">
    </script>
</head>
<body>
    <sgds-masthead></sgds-masthead>
    <!-- Add fluid attribute for full width banner -->
    <!-- 
        <sgds-masthead fluid></sgds-masthead> 
    -->
</body>
View on Web component storybook

Anatomy

Masthead Anatomy
  1. Container: Takes on the length of the browser.
  2. Text: Serves to inform the user that the website is a official Singapore Government website. The wording should not be edited in anyway.
  3. Dropdown: Serves to inform the user on how to identify official Singapore Government websites.

Spacing

Masthead Spacing

Within the masthead
Ensure that there is 4px horizontal spacing. Base height of 28px.

Official Government Banner design tokens

<!-- Sets font family for masthead -->
--masthead-font-family

<!-- Sets the padding left and right for viewport width 1024px and below -->
--masthead-mobile-padding-x	  

<!-- Sets the font size for viewport width 1024px and below -->
--masthead-mobile-font-size	    

Last updated 28 November 2023
Home


Latest version 2.2.0