This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Browse Foundations

Foundations

Edge elevation

Tokens for directional shadows on headers, action bars, and other elements pinned to the top or bottom edge.

Edge shadows are directional and indicate that an element is pinned to a viewport edge, casting a shadow toward the content beneath.

Token

Value (px/rem)

Preview

sgds-elevation-edge-top

box-shadow: 0 -2px 4px 0 rgba(14, 14, 14, 0.08);

sgds-elevation-edge-bottom

box-shadow: 0 2px 4px 0 rgba(14, 14, 14, 0.08);

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past Versions