SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Overview

Header that contains your site name, main navigation, search and other function links.

Usage

All .gov.sg digital services shall implement the Official Government Banner (containing the Singapore Government Online Logo) across all pages.


Types

1) Default Masthead

<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>

Guidelines

Your Masthead should:

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

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component