Karkas · pattern
Email şablonlari
Tranzaksion xatlar uçun naqş (4.181): tasdiq kodi, parol tiklaş, hisob-faktura va xabarnoma. Poçta mijozlari (Gmail, Outlook, Apple Mail, Mail.ru) flex/grid'ni bilmaydi — şuning uçun tuzilma JADVALLI: <table role="presentation"> içma-iç, bitta ustun, eni ~600 px, tugma — jadval katagidagi havola. Uslub bu yerda FoxUI tokenlarida (hujjat saytida köriş, mavzu va qoronği rejim bilan almaşiş); yuborişdan oldin build bosqiçida tokenlar qiymatga aylantirilib, uslublar inline qilinadi (masalan juice) — şu sababli faqat inline'ga çidaydigan xossalar işlatilgan. .fx-email__preheader — xatlar röyxatida mavzu yonida çiqadigan yaşirin qisqa matn. data-tone — kartaning tepa çiziği: brand (standart), success (tölov), warning (xavfsizlik), error (muvaffaqiyatsiz tölov).
beta 0.29.0 dan .fx-emailFaqat CSS
Emailingizni tasdiqlang
Assalomu alaykum, Aziz! Röyxatdan ötişni yakunlaş uçun quyidagi kodni kiriting:
482913
Kod 10 daqiqa amal qiladi. Siz söramagan bölsangiz — bu xatni e'tiborsiz qoldiring.
Tölov qabul qilindi
Rahmat! «Ipak Yöli Savdo» MChJ jamoasi uçun yillik obuna faollaştirildi.
Xizmat Summa FoxUI Jamoa — yillik, 5 örin 1 090 909 söm QQS 10% 109 091 söm Jami 1 200 000 söm
Sizni loyihaga taklif qilişdi
Dilnoza Yusupova sizni «Mijozlar CRM» loyihasiga Tahrirlovçi sifatida qöşdi.
«Yangi mijozlar sahifasi tayyor — körib çiqib izoh qoldiring, iltimos.»
Anatomiya root (table) .fx-emailşart preheader .fx-email__preheaderixtiyoriy outer .fx-email__outerşart container (600 px) .fx-email__containerşart header .fx-email__headerixtiyoriy logo .fx-email__logoixtiyoriy card .fx-email__cardşart title (h1) .fx-email__titleixtiyoriy text .fx-email__textixtiyoriy muted .fx-email__mutedixtiyoriy action (td) .fx-email__actionixtiyoriy button .fx-email__buttonixtiyoriy code (tasdiq kodi) .fx-email__codeixtiyoriy link (zaxira havola) .fx-email__linkixtiyoriy divider .fx-email__dividerixtiyoriy meta (hisob raqami, sana) .fx-email__metaixtiyoriy items (hisob-faktura) .fx-email__itemsixtiyoriy num .fx-email__numixtiyoriy total .fx-email__totalixtiyoriy notice .fx-email__noticeixtiyoriy footer .fx-email__footerşart Klaviatura va kiriş Tuzilma jadvallari role="presentation" — ekran öquvçi ularni jadval deb öqimaydi; faqat hisob-faktura qatorlari haqiqiy jadval (th scope="col"). Bitta h1 sarlavha, matn çapga tekislangan, kod katta va harflar oraliği keng (öqiş oson). Tugma matni harakatni aytadi («Yangi parol örnatiş»), yonida zaxira havola. Ranglar kontrasti tokenlardan — inline'dan keyin ham saqlanadi.
Kod AI uçun: qaçon işlatiladi Röyxatdan ötiş, kiriş kodi, parol tiklaş xatlari. Tölov çeki, hisob-faktura, obuna yangilanişi. Taklif, izoh, topşiriq haqida xabarnomalar. Sayt içidagi bildirişnoma → toast Ilova içidagi xabarlar qutisi → inbox Flex, grid, position, CSS özgaruvçisini inline qilinmagan holda yubormang — Outlook va Gmail ularni taşlab yuboradi. Muhim ma'lumotni (kod, summa) faqat rasmda bermang — rasmlar köpinça öçirilgan böladi. Bitta xatda bir neçta asosiy tugma qöymang — bitta harakat, qolgani matnli havola. Obunadan çiqiş va kompaniya manzilini olib taşlamang — marketing xatlarida bu qonun talabi. npx foxui add email <table class="fx-email" role="presentation" aria-label="Tasdiq kodi xati" style="margin-block-end: var(--fx-space-10)">
<tr><td class="fx-email__outer">
<span class="fx-email__preheader">Tasdiq kodi: 482 913. 10 daqiqa amal qiladi.</span>
<table class="fx-email__container" role="presentation">
<tr><td class="fx-email__header"><a class="fx-email__logo" href="https://foxui.dev">FoxUI</a></td></tr>
<tr><td class="fx-email__card">
<h1 class="fx-email__title">Emailingizni tasdiqlang</h1>
<p class="fx-email__text">Assalomu alaykum, Aziz! Röyxatdan ötişni yakunlaş uçun quyidagi kodni kiriting:</p>
<p class="fx-email__code">482913</p>
<p class="fx-email__muted">Kod 10 daqiqa amal qiladi. Siz söramagan bölsangiz — bu xatni e'tiborsiz qoldiring.</p>
</td></tr>
<tr><td class="fx-email__footer">«FoxUI» MChJ · Toşkent, Buyuk Ipak Yöli 45<br>Bu xat [email protected] hisobingiz uçun yuborildi. <a href="#">Xabarnoma sozlamalari</a> · <a href="#">Obunadan çiqiş</a></td></tr>
</table>
</td></tr>
</table>
<table class="fx-email" role="presentation" data-tone="warning" aria-label="Parol tiklaş xati" style="margin-block-end: var(--fx-space-10)">
<tr><td class="fx-email__outer">
<span class="fx-email__preheader">Parolni tiklaş havolasi — 1 soat amal qiladi.</span>
<table class="fx-email__container" role="presentation">
<tr><td class="fx-email__header"><a class="fx-email__logo" href="https://foxui.dev">FoxUI</a></td></tr>
<tr><td class="fx-email__card">
<h1 class="fx-email__title">Parolni tiklaş</h1>
<p class="fx-email__text">Hisobingiz uçun parolni tiklaş söraldi (18-oktabr, 14:32, Toşkent, Chrome).</p>
<table role="presentation"><tr><td class="fx-email__action"><a class="fx-email__button" href="#">Yangi parol örnatiş</a></td></tr></table>
<p class="fx-email__muted">Tugma işlamasa, havolani brauzerga nusxalang:<br><a class="fx-email__link" href="#">https://foxui.dev/parol/tiklash?t=8f2c…</a></p>
<p class="fx-email__notice">Siz söramagan bölsangiz, parolingiz özgarmaydi. Xavotir bölsa — [email protected] ga yozing.</p>
</td></tr>
<tr><td class="fx-email__footer">«FoxUI» MChJ · Toşkent, Buyuk Ipak Yöli 45<br>Bu xat [email protected] hisobingiz uçun yuborildi. <a href="#">Xabarnoma sozlamalari</a> · <a href="#">Obunadan çiqiş</a></td></tr>
</table>
</td></tr>
</table>
<table class="fx-email" role="presentation" data-tone="success" aria-label="Hisob-faktura xati" style="margin-block-end: var(--fx-space-10)">
<tr><td class="fx-email__outer">
<span class="fx-email__preheader">Tölov qabul qilindi: 1 200 000 söm, FX-2026-0412.</span>
<table class="fx-email__container" role="presentation">
<tr><td class="fx-email__header"><a class="fx-email__logo" href="https://foxui.dev">FoxUI</a></td></tr>
<tr><td class="fx-email__card">
<h1 class="fx-email__title">Tölov qabul qilindi</h1>
<p class="fx-email__text">Rahmat! «Ipak Yöli Savdo» MChJ jamoasi uçun yillik obuna faollaştirildi.</p>
<table class="fx-email__meta" role="presentation"><tr><td>Hisob-faktura</td><td class="fx-email__num">FX-2026-0412</td></tr><tr><td>Sana</td><td class="fx-email__num">18.10.2026</td></tr><tr><td>Tölov usuli</td><td class="fx-email__num">Click · **** 4417</td></tr></table>
<table class="fx-email__items">
<tr><th scope="col">Xizmat</th><th scope="col" class="fx-email__num">Summa</th></tr>
<tr><td>FoxUI Jamoa — yillik, 5 örin</td><td class="fx-email__num">1 090 909 söm</td></tr>
<tr><td>QQS 10%</td><td class="fx-email__num">109 091 söm</td></tr>
<tr class="fx-email__total"><td>Jami</td><td class="fx-email__num">1 200 000 söm</td></tr>
</table>
<table role="presentation"><tr><td class="fx-email__action"><a class="fx-email__button" href="#">Hisob-fakturani yuklab oliş (PDF)</a></td></tr></table>
</td></tr>
<tr><td class="fx-email__footer">«FoxUI» MChJ · Toşkent, Buyuk Ipak Yöli 45<br>Bu xat [email protected] hisobingiz uçun yuborildi. <a href="#">Xabarnoma sozlamalari</a> · <a href="#">Obunadan çiqiş</a></td></tr>
</table>
</td></tr>
</table>
<table class="fx-email" role="presentation" aria-label="Xabarnoma xati" style="margin-block-end: var(--fx-space-10)">
<tr><td class="fx-email__outer">
<span class="fx-email__preheader">Dilnoza Yusupova sizni «Mijozlar CRM» loyihasiga qöşdi.</span>
<table class="fx-email__container" role="presentation">
<tr><td class="fx-email__header"><a class="fx-email__logo" href="https://foxui.dev">FoxUI</a></td></tr>
<tr><td class="fx-email__card">
<h1 class="fx-email__title">Sizni loyihaga taklif qilişdi</h1>
<p class="fx-email__text"><strong>Dilnoza Yusupova</strong> sizni «Mijozlar CRM» loyihasiga <strong>Tahrirlovçi</strong> sifatida qöşdi.</p>
<hr class="fx-email__divider">
<p class="fx-email__muted">«Yangi mijozlar sahifasi tayyor — körib çiqib izoh qoldiring, iltimos.»</p>
<table role="presentation"><tr><td class="fx-email__action"><a class="fx-email__button" href="#">Loyihani oçiş</a></td></tr></table>
</td></tr>
<tr><td class="fx-email__footer">«FoxUI» MChJ · Toşkent, Buyuk Ipak Yöli 45<br>Bu xat [email protected] hisobingiz uçun yuborildi. <a href="#">Xabarnoma sozlamalari</a> · <a href="#">Obunadan çiqiş</a></td></tr>
</table>
</td></tr>
</table> Tokenlar: --fx-bg-brand-solid --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-adjust-mono --fx-font-family-mono --fx-font-family-sans --fx-font-size-2xl --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-line-height-normal --fx-line-height-relaxed --fx-line-height-snug --fx-radius-control --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan Akkordeon Yiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi. Maqola sahifasi Blog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi). Kiriş sahifasi Kiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split). Bento tör Landing xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense). Bleed (manfiy çet) Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi. Blog röyxati Blog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).