About this block

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.

When to use

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

• Language switcher blueprint
• Format settings

After

• Translation progress card

What you can display

One strong use is the locale verification step before going live. Other preview card contexts:

• Currency comparison. Focused view showing how every currency option renders a sample invoice total.
• Date format picker. Four date format rows aligned with the Format settings Selects so changes are visible immediately.
• RTL preview. Arabic or Hebrew sample sentence row with text-direction annotation for QA.

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.