Körsatiş · pattern
Logolar bulutiga işonç
Ijtimoiy isbot qatori (4.175): qisqa sarlavha («… jamoalar işonadi») va mijoz yoki hamkor logolari. Logolar kulrang va biroz xira — sahifani bezamaydi, hover yoki fokusda asl rangiga qaytadi. data-layout: row (standart — markazda oqim), grid (çegarali kataklar). Harakatli variant — röyxatni .fx-marquee içiga qöying (.fx-marquee__track fx-logos__list). Logo — currentColor'li SVG yoki rasm.
Bizning yeçimlar bilan işlayotgan jamoalar
- Çorsu Market
- Navbahor Soft
- Ipak Yöli Lab
- Registon Media
- Tashkent Digital
- Samarqand Travel
- Çorsu Market
- Navbahor Soft
- Ipak Yöli Lab
- Registon Media
- Tashkent Digital
- Samarqand Travel
- Çorsu Market
- Navbahor Soft
- Ipak Yöli Lab
- Registon Media
- Tashkent Digital
- Samarqand Travel
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-layout | grid çegarali kataklar | row |
data-tone | color doim rangli | mono |
Anatomiya
- root
.fx-logosşart - title
.fx-logos__titleixtiyoriy - list
.fx-logos__listşart - item
.fx-logos__itemşart
Holatlar
hoverfocus
Klaviatura va kiriş
Röyxat (ul/li). Logo SVG aria-hidden, nom matnda (yoki <img alt="Kompaniya nomi">). Havola bölsa — fokusda rang va halqa. Harakatli variantda marquee qoidalari (nusxa yaşirin, pauza).
Kod
AI uçun: qaçon işlatiladi
Işlating
- Hero ostida yoki narx sahifasida işonç belgisi.
- Integratsiyalar va hamkorlar röyxati (grid).
Işlatmang
- Mijoz fikrlari →
testimonials - Bosiladigan integratsiya kartalari →
card - Ruxsatsiz mijoz logosini qöymang.
- Logolarni turli balandlikda qoldirmang — optik bir xil ölçamga keltiring.
- 12 tadan ortiq logoni harakatsiz qatorga tiqmang — grid yoki marquee.
npx foxui add logos
<section class="fx-logos" aria-labelledby="lg-t"> <h2 class="fx-logos__title" id="lg-t">Bizning yeçimlar bilan işlayotgan jamoalar</h2> <ul class="fx-logos__list"><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9l2-5h12l2 5M4 9h16v11H4zM9 20v-6h6v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>Çorsu Market</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-5-3-8-7-8-11a8 8 0 0 1 16 0c0 4-3 8-8 11z" fill="currentColor"/></svg>Navbahor Soft</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18c4-8 14-4 18-12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Ipak Yöli Lab</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 21V10a8 8 0 0 1 16 0v11zM9 21v-6a3 3 0 0 1 6 0v6" fill="currentColor"/></svg>Registon Media</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="8" height="8" rx="2" fill="currentColor"/><rect x="13" y="13" width="8" height="8" rx="4" fill="currentColor"/></svg>Tashkent Digital</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 12h18M12 3c3 3 3 15 0 18" fill="none" stroke="currentColor" stroke-width="2"/></svg>Samarqand Travel</span></li></ul> </section> <section class="fx-logos" data-layout="grid" aria-label="Hamkorlar" style="margin-block-start:var(--fx-space-10)"> <ul class="fx-logos__list"><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9l2-5h12l2 5M4 9h16v11H4zM9 20v-6h6v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>Çorsu Market</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-5-3-8-7-8-11a8 8 0 0 1 16 0c0 4-3 8-8 11z" fill="currentColor"/></svg>Navbahor Soft</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18c4-8 14-4 18-12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Ipak Yöli Lab</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 21V10a8 8 0 0 1 16 0v11zM9 21v-6a3 3 0 0 1 6 0v6" fill="currentColor"/></svg>Registon Media</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="8" height="8" rx="2" fill="currentColor"/><rect x="13" y="13" width="8" height="8" rx="4" fill="currentColor"/></svg>Tashkent Digital</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 12h18M12 3c3 3 3 15 0 18" fill="none" stroke="currentColor" stroke-width="2"/></svg>Samarqand Travel</span></li></ul> </section> <section class="fx-logos" aria-label="Mijozlar (harakatli)" style="margin-block-start:var(--fx-space-10)"> <div class="fx-marquee" data-fx-marquee data-gap="lg" style="inline-size:100%"><ul class="fx-marquee__track fx-logos__list"><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9l2-5h12l2 5M4 9h16v11H4zM9 20v-6h6v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>Çorsu Market</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-5-3-8-7-8-11a8 8 0 0 1 16 0c0 4-3 8-8 11z" fill="currentColor"/></svg>Navbahor Soft</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18c4-8 14-4 18-12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>Ipak Yöli Lab</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 21V10a8 8 0 0 1 16 0v11zM9 21v-6a3 3 0 0 1 6 0v6" fill="currentColor"/></svg>Registon Media</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="8" height="8" rx="2" fill="currentColor"/><rect x="13" y="13" width="8" height="8" rx="4" fill="currentColor"/></svg>Tashkent Digital</span></li><li><span class="fx-logos__item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M3 12h18M12 3c3 3 3 15 0 18" fill="none" stroke="currentColor" stroke-width="2"/></svg>Samarqand Travel</span></li></ul></div> </section>
Tokenlar: --fx-bg-page --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-popover-width --fx-radius-badge --fx-radius-surface --fx-size-icon-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-4 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.