Karkas · pattern
CTA va obuna bölimi
Sahifa oxiridagi çaqiriq bölimi (4.174): katta sarlavha, bir gaplik izoh va 1–2 tugma — standart holatda brend rangli panel (içida naqş va yoruğ doğ, tugmalar teskari rangda); data-tone="subtle" — yengil fon. Obuna varianti: email maydoni + tugma, izoh qatori va holat xabari (data-state: loading, success — forma örniga rahmat xabari, error). data-layout="split" — matn çapda, amal öngda (maqola içidagi CTA).
Keyingi saytingizni FoxUI bilan quring
Oçiq yadroni bugun örnating — obuna kerak bölganda yangilaniş va MCP ulanadi.
«Nima yangi» xatini oling
Har relizda bitta qisqa xat: yangi komponentlar va özgarişlar. Spam yöq.
Istalgan payt bitta havola bilan bekor qilasiz.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | subtle yengil fon | brand |
data-layout | split matn çapda, amal öngda | center |
data-state | loadingsuccess forma örniga rahmat xabarierror | idle |
Anatomiya
- root
.fx-ctaşart - title
.fx-cta__titleşart - text
.fx-cta__textixtiyoriy - actions
.fx-cta__actionsixtiyoriy - form (obuna)
.fx-cta__formixtiyoriy - hint
.fx-cta__hintixtiyoriy - status
.fx-cta__statusixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter | Formani yuboradi |
<section aria-labelledby> + h2. Email maydoniga yorliq (körinmas bölsa ham .fx-sr-only). Holat xabari role="status" — yuborilgaç ekran öquvçi aytadi; belgi (✓ ✕) + söz. Brend panelda fokus halqasi oq tusda.
Kod
AI uçun: qaçon işlatiladi
- Landing va narx sahifasi oxirida asosiy çaqiriq.
- Blog/changelog ostida xatga obuna.
npx foxui add cta
<section class="fx-cta" aria-labelledby="cta-t">
<div class="fx-bg" data-pattern="grid" data-on="brand" data-fade="top" aria-hidden="true"></div>
<h2 class="fx-cta__title" id="cta-t">Keyingi saytingizni FoxUI bilan quring</h2>
<p class="fx-cta__text">Oçiq yadroni bugun örnating — obuna kerak bölganda yangilaniş va MCP ulanadi.</p>
<div class="fx-cta__actions"><a class="fx-btn" data-variant="primary" data-size="lg" href="#">Bepul boşlaş</a><a class="fx-btn" data-size="lg" href="#">Narxlarni köriş</a></div>
</section>
<section class="fx-cta" data-tone="subtle" data-layout="split" aria-labelledby="cta-n" style="margin-block-start:var(--fx-space-6)">
<h2 class="fx-cta__title" id="cta-n">«Nima yangi» xatini oling</h2>
<p class="fx-cta__text">Har relizda bitta qisqa xat: yangi komponentlar va özgarişlar. Spam yöq.</p>
<form class="fx-cta__form" action="#" onsubmit="event.preventDefault(); const s=this.closest('.fx-cta'); s.dataset.state='success'; s.querySelector('.fx-cta__status').textContent='Rahmat! Tasdiqlash xati pochtangizga yuborildi.';">
<label class="fx-sr-only" for="cta-email">Email manzil</label>
<input class="fx-input" id="cta-email" type="email" required autocomplete="email" placeholder="[email protected]">
<button class="fx-btn" data-variant="primary" type="submit">Obuna böliş</button>
</form>
<p class="fx-cta__hint">Istalgan payt bitta havola bilan bekor qilasiz.</p>
<p class="fx-cta__status" role="status"></p>
</section>Tokenlar: --fx-bg-brand-solid --fx-bg-subtle --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-dialog-width --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-popover-width --fx-radius-overlay --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-error --fx-text-on-brand --fx-text-primary