DigitalStamp
React DigitalStamp for Saudi government websites: the flag and statement bar, .gov.sa explainer panel, and DGA registration number, in Arabic and English.
DigitalStamp shows the flag and statement bar with an explainer panel. Set extension for the domain copy and registrationNumber for the DGA registration panel.
When to use
Use DigitalStamp at the top of every page of an official Saudi government website, as the Platforms Code requires. Set extension to match your domain and registrationNumber when the site is registered with the DGA.
Show it once per page, above the header.
Examples
Props
Props declared by DigitalStamp. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
extension | DigitalStampExtension | 'gov.sa' | Domain extension - selects the default verification copy + highlighted domain. |
statement | react.ReactNode | Bar statement, shown beside the flag. | |
triggerLabel | react.ReactNode | 'How you know?' | Disclosure trigger label. |
domainTitle | react.ReactNode | Domain-verification column title. Defaults to the SDGA copy for extension (domain in <strong>). | |
domainDescription | react.ReactNode | Domain-verification column body. | |
securityTitle | react.ReactNode | Security/HTTPS column title. Defaults to the SDGA copy (HTTPS in <strong>). | |
securityDescription | react.ReactNode | Security/HTTPS column body. | |
registrationLabel | react.ReactNode | Registration-panel lead label. | |
registrationNumber | react.ReactNode | DGA registration number shown (and linked) in the panel. The panel is omitted when this is empty. | |
registrationHref | string | href for the registration-number link. Falls back to plain text when omitted. | |
logo | react.ReactNode | Official DGA logo node rendered in the registration panel (consumer-supplied asset; it's trademarked). | |
open | boolean | Controlled open state of the disclosure panel. | |
defaultOpen | boolean | false | Uncontrolled initial open state. |
onOpenChange | (open: boolean) => void | Called with the next open state when the user toggles the panel. |
Accessibility
The explainer toggle is a button with aria-expanded and aria-controls, so the panel state is announced. The flag and marks are decorative and the statement is text.
The default copy is the English SDGA text. Pass the Arabic statement and panel copy through props, as the Arabic example shows; the bar itself follows the page direction.