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

 
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-masthead/dist/sgds-masthead/sgds-masthead.css">
    <script
        type="module"
        src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-masthead/dist/sgds-masthead/sgds-masthead.js">
    </script>
</head>
<body>
    <sgds-masthead></sgds-masthead>
</body>

                

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

--sgds-masthead-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
--sgds-masthead-link-color: #4372d6;
--sgds-masthead-link-hover-color: #3a79ff;
<!-- Font size for tablet view 1024px -->
--sgds-masthead-tablet-font-size: 0.75rem
<!-- Left and right padding for tablet view 1024px -->
--sgds-masthead-tablet-padding-x: 1.25rem;
Home


Previous version 2.0.0