Localisation (l10n)

Adapting content and formats for a specific language/region.

html

<div class="l10n l10n--uk">
  <p class="l10n__title">Trail backpack</p>
  <p class="l10n__price l10n__price--us" style="color:#A8E6C1;">$64.00</p>
  <p class="l10n__price l10n__price--uk" style="color:#A8E6C1;">&pound;51.00</p>
  <p class="l10n__price l10n__price--jp" style="color:#A8E6C1;">&yen;9,600</p>
  <p class="l10n__date l10n__date--us">Ships 3/14/2026</p>
  <p class="l10n__date l10n__date--uk">Ships 14/03/2026</p>
  <p class="l10n__date l10n__date--jp">Ships 2026&#24180;3&#26376;14&#26085;</p>
  
  <p class="l10n__unit l10n__unit--us">Capacity: 1.5 gal &middot; 22 in tall</p>
  <p class="l10n__unit l10n__unit--uk">Capacity: 6.8 L &middot; 56 cm tall</p>
  <p class="l10n__unit l10n__unit--jp">Capacity: 6.8 L &middot; 56 cm tall</p>
  
</div>
<style>
.l10n { font: 13px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.l10n__title { margin: 0 0 8px; font-weight: 700; }
.l10n__price { display: none; margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.l10n__date, .l10n__unit { display: none; margin: 0 0 4px; font-size: 11px; color: #24143099; }
.l10n--us .l10n__price--us, .l10n--uk .l10n__price--uk, .l10n--jp .l10n__price--jp { display: block; }
.l10n--us .l10n__date--us, .l10n--uk .l10n__date--uk, .l10n--jp .l10n__date--jp { display: block; }
.l10n--us .l10n__unit--us, .l10n--uk .l10n__unit--uk, .l10n--jp .l10n__unit--jp { display: block; }
</style>

tailwind

<div class="l10ntw l10ntw--uk font-sans text-[13px] leading-6 text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border">
  <p class="m-0 mb-2 font-bold">Trail backpack</p>
  <p class="l10ntw__price l10ntw__price--us hidden m-0 mb-1 text-2xl font-extrabold" style="color:#A8E6C1;">$64.00</p>
  <p class="l10ntw__price l10ntw__price--uk hidden m-0 mb-1 text-2xl font-extrabold" style="color:#A8E6C1;">&pound;51.00</p>
  <p class="l10ntw__price l10ntw__price--jp hidden m-0 mb-1 text-2xl font-extrabold" style="color:#A8E6C1;">&yen;9,600</p>
  <p class="l10ntw__date l10ntw__date--us hidden m-0 mb-1 text-[11px] text-[#24143099]">Ships 3/14/2026</p>
  <p class="l10ntw__date l10ntw__date--uk hidden m-0 mb-1 text-[11px] text-[#24143099]">Ships 14/03/2026</p>
  <p class="l10ntw__date l10ntw__date--jp hidden m-0 mb-1 text-[11px] text-[#24143099]">Ships 2026&#24180;3&#26376;14&#26085;</p>
  
  <p class="l10ntw__unit l10ntw__unit--us hidden m-0 mb-1 text-[11px] text-[#24143099]">Capacity: 1.5 gal &middot; 22 in tall</p>
  <p class="l10ntw__unit l10ntw__unit--uk hidden m-0 mb-1 text-[11px] text-[#24143099]">Capacity: 6.8 L &middot; 56 cm tall</p>
  <p class="l10ntw__unit l10ntw__unit--jp hidden m-0 mb-1 text-[11px] text-[#24143099]">Capacity: 6.8 L &middot; 56 cm tall</p>
  
</div>
<style>
.l10ntw--us .l10ntw__price--us, .l10ntw--uk .l10ntw__price--uk, .l10ntw--jp .l10ntw__price--jp { display: block; }
.l10ntw--us .l10ntw__date--us, .l10ntw--uk .l10ntw__date--uk, .l10ntw--jp .l10ntw__date--jp { display: block; }
.l10ntw--us .l10ntw__unit--us, .l10ntw--uk .l10ntw__unit--uk, .l10ntw--jp .l10ntw__unit--jp { display: block; }
</style>

react

export function LocalisationL10n({
  region = "uk",
  showUnits = true,
  accent = "#A8E6C1",
  productName = "Trail backpack",
}) {
  const data = {
    us: { price: "$64.00", date: "Ships 3/14/2026", unit: "Capacity: 1.5 gal \u00B7 22 in tall" },
    uk: { price: "\u00A351.00", date: "Ships 14/03/2026", unit: "Capacity: 6.8 L \u00B7 56 cm tall" },
    jp: { price: "\u00A59,600", date: "Ships 2026\u5E743\u670814\u65E5", unit: "Capacity: 6.8 L \u00B7 56 cm tall" },
  }[region];
  return (
    <div style={{ font: "13px/1.6 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 8px", fontWeight: 700 }}>{productName}</p>
      <p style={{ margin: "0 0 4px", fontSize: 22, fontWeight: 800, color: accent }}>{data.price}</p>
      <p style={{ margin: "0 0 4px", fontSize: 11, color: "#24143099" }}>{data.date}</p>
      {showUnits && <p style={{ margin: "0 0 4px", fontSize: 11, color: "#24143099" }}>{data.unit}</p>}
    </div>
  );
}