Call the 24/7 ScamShield Helpline at 1799 if you are unsure if something is a scam.
Reusable UI components including banners, buttons, cards, forms, modals, and navigation elements with usage examples and implementation guidelines.
HSA Self Help Tools uses a collection of reusable components to maintain consistency across all applications. These components follow government website standards and accessibility guidelines.
Components designed for use across multiple pages
Meets government website standards
WCAG AA compliant with proper ARIA attributes
Government-compliant banner components for official websites and scam awareness.
Official Singapore government website identification banner with expandable content explaining how to identify trusted government sites.
Dismissible information banner alerting users about scam awareness with ScamShield helpline information and resources.
The GovtWebsiteBanner is required for all Singapore government websites to help users identify official government websites and protect against phishing attempts.
The ScamshieldBanner is recommended to raise awareness about scams and provide users with resources to verify suspicious communications.
Displays the official Singapore government crest and provides information to help users verify they are on a legitimate government website. The banner is expandable to show detailed guidance on identifying trusted government sites through .gov.sg domain verification and HTTPS security.
/constants/hsa/common/banner.json/components/common/banner/GovtWebsiteBanner.tsxreact - useState hook/constants/hsa/common/banner.json - Content configurationimport GovtWebsiteBanner from '@/components/common/banner/GovtWebsiteBanner';
export default function Layout({ children }) {
return (
<>
<GovtWebsiteBanner />
{children}
</>
);
}{
"govtWebsiteBanner": {
"mainText": "A Singapore Government Agency Website",
"toggleButtonText": "How to identify",
"expandedContent": {
"section1": {
"title": "Official website links end with .gov.sg",
"description": "Government agencies communicate via .gov.sg websites...",
"linkText": "go.gov.sg",
"linkUrl": "https://go.gov.sg"
},
"section2": {
"title": "Secure websites use HTTPS",
"description": "Look for a lock icon in the browser's address bar..."
}
}
}
}Alerts users about scam awareness and provides quick access to the ScamShield helpline (1799). The banner is dismissible, allowing users to close it after viewing. Helps protect users from phishing and fraud attempts by directing them to official ScamShield resources.
/constants/hsa/common/banner.json/components/common/banner/ScamshieldBanner.tsxreact - useState hook, React.FC type/constants/hsa/common/banner.json - Content configurationimport ScamshieldBanner from '@/components/common/banner/ScamshieldBanner';
export default function Layout({ children }) {
return (
<>
<ScamshieldBanner />
{children}
</>
);
}{
"scamshieldBanner": {
"title": "Beware of Scams",
"description": {
"text": "Visit the ScamShield website or call the Anti-Scam Helpline...",
"linkText": "ScamShield website",
"linkUrl": "https://www.scamshield.gov.sg",
"helplineNumber": "1799"
}
}
}Once dismissed, the banner will not reappear until the page is refreshed. Consider implementing localStorage to persist the dismissed state across sessions if needed.
Both banners should be placed at the top of your layout, typically in app/layout.tsx:
import GovtWebsiteBanner from '@/components/common/banner/GovtWebsiteBanner';
import ScamshieldBanner from '@/components/common/banner/ScamshieldBanner';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{/* Government compliance banners */}
<GovtWebsiteBanner />
<ScamshieldBanner />
{/* Navigation */}
<Header />
{/* Main content */}
<main>{children}</main>
{/* Footer */}
<Footer />
</body>
</html>
);
}/constants/hsa/common/banner.jsonAdditional component documentation for buttons, cards, forms, modals, and navigation elements will be added in future updates.