Locale Preview Card
Side-by-side locale comparison card showing how dates, numbers, currency, and a sample sentence render in English versus the selected target locale.
Side-by-side locale comparison card showing how dates, numbers, currency, and a sample sentence render in English versus the selected target locale.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Locale Preview Card shows exactly how the same value renders in two locales side by side, English (en-US) on the left and German (de-DE) on the right. Six format rows step through the comparison: short date Jun 13, 2026 vs 13.06.2026, long date, 12-hour time 2:45 PM becoming 14:45, the number 1,284,319.75 swapping its separators to 1.284.319,75, currency $4,800.00 becoming 4.800,00 EUR, and the sample sentence Your trial ends in 3 days rendered in German. A footer note explains that formatting uses the browser Intl API seeded by the selected locale tag.
Rows are one typed array with label, source, and target fields. All numeric values carry tabular-nums. The card is the see-it-in-context step before shipping a locale.
Reach for this block on the locale configuration or preview page, rendered when a user selects or activates a new locale. Wire source and target dynamically from Intl.DateTimeFormat and Intl.NumberFormat using the saved locale tag.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the locale verification step before going live. Other preview card contexts:
Tip: the sample sentence row catches translation issues that pure number and date rows cannot, a locale that formats correctly can still break on gendered plurals or word order.