Edge elevation

Edge elevation utility classes for applying directional sticky-edge shadows in code.

Edge elevation

Use edge elevation when an element is pinned to a viewport edge and needs separation from scrolling content. Pair elevation utilities with a surface background such as sgds:bg-surface-raised and an appropriate radius token so layers feel intentional.

SGDS tailwind tokenUsagePreview
sgds:shadow-edge-top
Directional shadow for sticky footers and elements pinned to the bottom edge.
Top
sgds:shadow-edge-bottom
Directional shadow for sticky headers and elements pinned to the top edge.
Bottom

Singapore Government Design System

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