Karkas · pattern

Jamoa bölimi

Marketing saytining «Jamoa» sahifasi yoki bölimi (4.177): sarlavha bloki, a'zolar töri — rasm (yoki pastel fonda boş harflar), ism, lavozim, qisqa bio va ijtimoiy havolalar — hamda oxirida «Bizga qöşiling» kartasi (karyera sahifasiga). Rasm hover'da biroz kattalaşib rangga kiradi. data-layout: grid (standart — katta kartalar) yoki compact (doira rasm, markazda — 10+ kişilik jamoa yoki maslahat kengaşi uçun).

beta0.29.0 dan.fx-teamFaqat CSS

Jamoa

FoxUI'ni kim quryapti

Toşkentdagi kiçik jamoa: dizayn, kod va qöllab-quvvatlaş — bir stolda.

RS
Rahim Sadiy
Asosçi, mahsulot
Ön yildan beri raqamli mahsulotlar dizayni bilan şuğullanadi.
DY
Dilnoza Yusupova
Dizayn tizimi muhandisi
Tokenlar, mavzular va kontrast qöriqçisi uning qölidan ötadi.
JT
Jasur Toshpoʻlatov
Front-end
Komponent xulqlari, klaviatura va brauzer sinovlari.
Bizga qöşiling
3 ta oçiq vakansiya — masofaviy ham mumkin.
Vakansiyalar

Maslahat kengaşi

Aziz Karimov
«Ipak Yöli Savdo», CTO
Malika Nazarova
UX tadqiqotçi
Bobur Toshmatov
«Mehr Klinikasi», IT rahbar
Sardor Olimov
Mustaqil dasturçi

Variantlar

Atribut	Qiymatlar	Standart
`data-layout`	`grid` katta kartalar 4:5 `compact` doira rasm, markazda	`grid`
`data-color`	`yellow` `pink` `blue` `coral` `green` `purple`	`none`

Anatomiya

root.fx-teamşart
head.fx-team__headixtiyoriy
eyebrow.fx-team__eyebrowixtiyoriy
title.fx-team__titleixtiyoriy
text.fx-team__textixtiyoriy
list.fx-team__listşart
member.fx-team__memberşart
photo (img yoki boş harflar).fx-team__photoixtiyoriy
name (h3).fx-team__nameşart
role.fx-team__roleixtiyoriy
bio.fx-team__bioixtiyoriy
links.fx-team__linksixtiyoriy
link.fx-team__linkixtiyoriy
join card.fx-team__joinixtiyoriy
join title.fx-team__join-titleixtiyoriy
join text.fx-team__join-textixtiyoriy

Holatlar

hover (rasm rangga kiradi)focus

Klaviatura va kiriş

Tugma	Amal
`Tab`	Ijtimoiy havolalar va «Vakansiyalar» tugmasi böylab

Röyxat <ul>, har a'zo — h3 (ism) bilan; rasm bezak bölsa aria-hidden, haqiqiy rasm bölsa alt="" (ism allaqaçon matnda). Ikonli havolalar aria-label bilan («Dilnoza Yusupova — Telegram»), bosiş maydoni kamida --fx-size-min-target.

Naqş: WAI-ARIA APG landmarks · rol region

Kod

AI uçun: qaçon işlatiladi

Işlating

«Biz haqimizda» va «Jamoa» sahifalari.
Landing'da işonç uçun — mahsulot ortidagi odamlar.

Işlatmang

Ilova içidagi a'zolar röyxati va rollar → members
Bitta odam haqida qisqa ma'lumot → persona
Rasmlarni har xil nisbat va fonda qöymang — bir xil kesim (4:5) va bir xil yoruğlik.
Bio'ni CV'ga aylantirmang — bir-ikki jumla, odamning nima qilişi.
Ijtimoiy havolani belgisiz (faqat ikon) aria-label'siz qoldirmang.

npx foxui add team

<section class="fx-team" aria-labelledby="tm-t">
  <header class="fx-team__head"><p class="fx-team__eyebrow">Jamoa</p><h2 class="fx-team__title" id="tm-t">FoxUI'ni kim quryapti</h2><p class="fx-team__text">Toşkentdagi kiçik jamoa: dizayn, kod va qöllab-quvvatlaş — bir stolda.</p></header>
  <ul class="fx-team__list">
    <li class="fx-team__member"><span class="fx-team__photo" data-color="purple" aria-hidden="true">RS</span><h3 class="fx-team__name">Rahim Sadiy</h3><p class="fx-team__role">Asosçi, mahsulot</p><p class="fx-team__bio">Ön yildan beri raqamli mahsulotlar dizayni bilan şuğullanadi.</p><ul class="fx-team__links"><li><a class="fx-team__link" href="#" aria-label="Rahim Sadiy — Telegram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M21 4 3 11l6 2 2 6 3-4 5 4z"/></svg></a></li><li><a class="fx-team__link" href="#" aria-label="Rahim Sadiy — LinkedIn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"/></svg></a></li></ul></li>
    <li class="fx-team__member"><span class="fx-team__photo" data-color="green" aria-hidden="true">DY</span><h3 class="fx-team__name">Dilnoza Yusupova</h3><p class="fx-team__role">Dizayn tizimi muhandisi</p><p class="fx-team__bio">Tokenlar, mavzular va kontrast qöriqçisi uning qölidan ötadi.</p><ul class="fx-team__links"><li><a class="fx-team__link" href="#" aria-label="Dilnoza Yusupova — Telegram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M21 4 3 11l6 2 2 6 3-4 5 4z"/></svg></a></li><li><a class="fx-team__link" href="#" aria-label="Dilnoza Yusupova — LinkedIn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"/></svg></a></li></ul></li>
    <li class="fx-team__member"><span class="fx-team__photo" data-color="blue" aria-hidden="true">JT</span><h3 class="fx-team__name">Jasur Toshpoʻlatov</h3><p class="fx-team__role">Front-end</p><p class="fx-team__bio">Komponent xulqlari, klaviatura va brauzer sinovlari.</p><ul class="fx-team__links"><li><a class="fx-team__link" href="#" aria-label="Jasur Toshpoʻlatov — Telegram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M21 4 3 11l6 2 2 6 3-4 5 4z"/></svg></a></li><li><a class="fx-team__link" href="#" aria-label="Jasur Toshpoʻlatov — LinkedIn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"/></svg></a></li></ul></li>
    <li class="fx-team__join"><h3 class="fx-team__join-title">Bizga qöşiling</h3><p class="fx-team__join-text">3 ta oçiq vakansiya — masofaviy ham mumkin.</p><a class="fx-btn" href="#">Vakansiyalar</a></li>
  </ul>
</section>
<section class="fx-team" data-layout="compact" aria-labelledby="tm-t2" style="margin-block-start: var(--fx-space-12)">
  <header class="fx-team__head"><h2 class="fx-team__title" id="tm-t2">Maslahat kengaşi</h2></header>
  <ul class="fx-team__list">
    <li class="fx-team__member"><span class="fx-team__photo" data-color="yellow" aria-hidden="true">AK</span><h3 class="fx-team__name">Aziz Karimov</h3><p class="fx-team__role">«Ipak Yöli Savdo», CTO</p></li>
    <li class="fx-team__member"><span class="fx-team__photo" data-color="pink" aria-hidden="true">MN</span><h3 class="fx-team__name">Malika Nazarova</h3><p class="fx-team__role">UX tadqiqotçi</p></li>
    <li class="fx-team__member"><span class="fx-team__photo" data-color="coral" aria-hidden="true">BT</span><h3 class="fx-team__name">Bobur Toshmatov</h3><p class="fx-team__role">«Mehr Klinikasi», IT rahbar</p></li>
    <li class="fx-team__member"><span class="fx-team__photo" data-color="green" aria-hidden="true">SO</span><h3 class="fx-team__name">Sardor Olimov</h3><p class="fx-team__role">Mustaqil dasturçi</p></li>
  </ul>
</section>

Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-subtle --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-standard --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-md --fx-font-size-display-sm --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-tight --fx-motion-base --fx-motion-fast --fx-motion-slow --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog 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ş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding 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öyxatiBlog 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).

Jamoa bölimi

FoxUI'ni kim quryapti

Rahim Sadiy

Dilnoza Yusupova

Jasur Toshpoʻlatov

Bizga qöşiling

Maslahat kengaşi

Aziz Karimov

Malika Nazarova

Bobur Toshmatov

Sardor Olimov

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik