Components Overview

Component reference is helpful for you to implement layouts, elements and components, using our CSS class and modifiers.
Each page provides you with comprehensive usage instructions, examples and guidelines.

Official Government Banner image
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
Footer image
Footer

The footer contains supporting information for your service at the bottom of your website.
All .gov.sg digital services shall contain a Global Footer Bar across all pages.
The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.

Mandatory
Main Navigation image
Main Navigation

This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.

Required
Side Navigation image
Side Navigation

The side navigation is used to display a list of links to move between pages within a related category. It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.

Required
Accordion image
Accordion

A dropdown mechanism that allow users to either show or hide related content.

General
Alert image
Alert

Alerts provide short, timely, and relevant information for your users.

General
Badge image
Badge

Badges can be used to highlight important bits of information such as labels, notifications & status.

General
Breadcrumb image
Breadcrumb

Breadcrumbs help users to navigate and understand where they are on the current website or service.

General
Button image
Button

Buttons communicate actions that users can take throughout your portal which can be used in places such as modals, forms and cards

General
Card image
Card

Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.

General
Checkbox image
Checkbox

This component is used when you require users to select multiple items from a list.

General
Combo Box image
Combo Box

This component is used when you require users to make one or more selections from a list

General
Date Picker image
Date Picker

Allows users to select a single date or a range of dates depending on the use case.

General
File Upload image
File Upload

Allows users to upload files of various sizes and formats

General
Modal image
Modal

The modal component inform users about a specific task and may contain critical information which users then have to make a decision. E.g Accepting the T&Cs during signup

General
Pagination image
Pagination

The pagination component is used to display a list of page numbers for your users, so that they can navigate to the next or previous page.

General
Progress Bar image
Progress Bar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

General
Quantity Toggle image
Quantity Toggle

The quantity toggle component is used to increase or decrease an incremental venue, usually best used when the user needs to enter or adjust the quantity of a selected item.

General
Radio Button image
Radio Button

Radio buttons allow the user to select one option from a set while seeing all available options.

General
Stepper image
Stepper

Used to inform users which step they are at in a form or a process

General
Table image
Table

The use of a table is to organise a collections of data into readable rows

General
Tabs image
Tabs

Tabs are a navigation element resembling tabbed dividers in a filing cabinet - by clicking a tab, users can easily locate a page containing related content.

General
Text Area image
Text Area

Text areas allow for the collection of input longer than a single line.

General
Text Input image
Text Input

Text inputs allow your users to enter letters, numbers and symbols on a single line.

General
Toast image
Toast

Allows you to convey quick messaging notifications to the user. E.g When an action is completed, a success toast notification can be displayed and dismissed by the user or dismissed after a set amount of time has passed. Alternatively, a CTA can be used with the toast to allow the user to proceed with next steps or try again

General
Tooltip image
Tooltip

Tooltips display more information when users hover over, focus on, or interact with an element.

General
Home


Latest version 2.2.0