The modal component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
Modal width can be changed by via the following classes:
<div class="sgds-modal-background">inside the .sgds-modal container for the modal overlay.
1) Default modal
Design System unites Singapore Government digital services around a common visual language and user experience
Make a decision:
2) Image modal
SGDS does not provide interactivity for modals out of the box, so here's how you can implement modal opening and closing behaviour:
Modals are hidden (display: none) by default, and appear (display: flex)
when you attach the
on the wrapping
.sgds-modal container. For example, to show a modal:
Similarly, to close a modal, simply remove the
.is-active class from the
Set the modal to display: flex(default value is display: none)
Set the modal width to 30vw (viewport width)
Set the modal width to 70vw (viewport width)
Set the modal width to 95vw (viewport width)
When to use
Modals should be used when:
- You want to interrupt a user’s current task to direct the user’s attention to something important. For example, confirming when a user wants to submit a form, user sign up and login, or highlighting an important event with an infographic upon entering your website.
Modals should not be used when:
- You need to present simple notifications to the user. It should always accompany something actionable by the user such as confirming or filling in a form. If you need to notifiy the user or something important, use something less intrusive such as the notification component instead.
Can't find a component?
Let us know what you need and we’ll be happy to look into it