RTL

Right-to-left text direction (e.g. Arabic, Hebrew).

html

<div class="rtlc" dir="rtl">
  <div class="rtlc__row">
    <span class="rtlc__icon" style="background:#A8E6C1;" aria-hidden="true">&#128230;</span>
    <div class="rtlc__text"><strong>ملخص الطلب</strong><small>3 عناصر</small></div>
    <span class="rtlc__chevron" aria-hidden="true">&rsaquo;</span>
  </div>
  <p class="rtlc__note">dir=&quot;rtl&quot; &mdash; the row, icon order and chevron all flip with real direction, not a mirrored image.</p>
</div>
<style>
.rtlc { font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.rtlc__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; }
.rtlc__icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.rtlc__text { flex: 1; }
.rtlc__text strong { display: block; }
.rtlc__text small { color: #24143099; font-size: 12px; }
.rtlc__chevron { font-size: 20px; color: #24143060; transform: scaleX(1); }
[dir="rtl"] .rtlc__chevron { transform: scaleX(-1); }
.rtlc__note { margin: 10px 0 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="rtlctw" dir="rtl">
  <div class="flex items-center gap-3 p-3 rounded-lg bg-white border border-[#24143018]">
    <span class="w-[34px] h-[34px] rounded-lg grid place-items-center shrink-0" style="background:#A8E6C1;" aria-hidden="true">&#128230;</span>
    <div class="flex-1"><strong class="block">ملخص الطلب</strong><small class="text-[#24143099] text-xs">3 عناصر</small></div>
    <span class="rtlctw__chevron text-xl text-[#24143060]" aria-hidden="true">&rsaquo;</span>
  </div>
  <p class="mt-2.5 text-[10px] text-[#24143099]">dir=&quot;rtl&quot; &mdash; the row, icon order and chevron all flip with real direction, not a mirrored image.</p>
</div>
<style>
.rtlctw { font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
[dir="rtl"] .rtlctw__chevron { transform: scaleX(-1); display: inline-block; }
</style>

react

export function Rtl({
  isRTL = true,
  title = "ملخص الطلب",
  subtitle = "3 عناصر",
  accent = "#A8E6C1",
}) {
  const dir = isRTL ? "rtl" : "ltr";
  return (
    <div dir={dir} style={{ font: "15px/1.6 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: 12, borderRadius: 8, background: "#ffffff", border: "1px solid #24143018" }}>
        <span aria-hidden="true" style={{ width: 34, height: 34, borderRadius: 8, display: "grid", placeItems: "center", flexShrink: 0, background: accent }}>&#128230;</span>
        <div style={{ flex: 1 }}><strong style={{ display: "block" }}>{title}</strong><small style={{ color: "#24143099", fontSize: 12 }}>{subtitle}</small></div>
        <span aria-hidden="true" style={{ fontSize: 20, color: "#24143060", display: "inline-block", transform: isRTL ? "scaleX(-1)" : "scaleX(1)" }}>&rsaquo;</span>
      </div>
      <p style={{ margin: "10px 0 0", fontSize: 10, color: "#24143099" }}>dir="{dir}" &mdash; the row, icon order and chevron all flip with real direction, not a mirrored image.</p>
    </div>
  );
}