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.
Example
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@2.1.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>Anatomy
- Container: Takes on the length of the browser.
- Text: Serves to inform the user that the website is a official Singapore Government website. The wording should not be edited in anyway.
- Dropdown: Serves to inform the user on how to identify official Singapore Government websites.
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 02 October 2024
