Çorsu ClubOltin
A'zoAziz Karimov0427 1985
Körsatiş · molecule
Gologramma karta
A'zolik, sodiqlik va sovğa kartasi, çipta yoki kolleksiya uçun «jonli» karta: kursor ortidan 3D egiladi (mavjud xulq data-fx-tilt), yuzasida kamalak folga (pastel tokenlardan) va kursor ortidagi nur, ingiçka içki çegara va naqş (panjara, çiziq, nuqta). Fon — mavzuning brend rangi (standart), töq yoki yoruğ; şakl — bank kartasi (1,586) yoki çipta (data-shape="tall"); rasm bilan — .fx-holo__media. Telefonda va harakat kamaytirilganda egilmaydi, folga sekin suzadi (heroui.pro Holo Card'dan ilhom, kalibr — FoxUI).
Sovğa kartasi500 000
Amal qiladi31.12.2026GC-8841
IT Park FestVIP
24-noyabr · 18:00ToşkentA-12
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | darklight | brand |
data-pattern | linesdots | lattice |
data-shape | tall | card |
Anatomiya
- root
.fx-holoşart - pattern
.fx-holo__patternixtiyoriy - top
.fx-holo__topixtiyoriy - brand
.fx-holo__brandixtiyoriy - tier
.fx-holo__tierixtiyoriy - chip
.fx-holo__chipixtiyoriy - bottom
.fx-holo__bottomixtiyoriy - owner
.fx-holo__ownerixtiyoriy - number
.fx-holo__numberixtiyoriy - media
.fx-holo__mediaixtiyoriy
Holatlar
tilting
Klaviatura va kiriş
<article aria-label> — kartaning ma'nosi (masalan, «Oltin a'zolik kartasi»); naqş va folga bezak (aria-hidden, pointer-events: none). Egiliş faqat siçqonça bilan, harakat kamaytirilsa öçadi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- A'zolik/sodiqlik kartasi, sovğa sertifikati, tadbir çiptasi, yutuq yoki kolleksiya kartasi.
- Landing sahifasidagi «premium» taklif (Founders, VIP).
npx foxui add holo
<div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-6);align-items:center;padding:var(--fx-space-4)"> <article class="fx-holo" data-fx-tilt data-max="12" aria-label="Oltin a'zolik kartasi"> <i class="fx-holo__pattern" aria-hidden="true"></i> <div class="fx-holo__top"><span class="fx-holo__brand">Çorsu Club</span><span class="fx-holo__tier">Oltin</span></div> <span class="fx-holo__chip" aria-hidden="true"></span> <div class="fx-holo__bottom"><span class="fx-holo__owner"><span>A'zo</span><b>Aziz Karimov</b></span><span class="fx-holo__number">0427 1985</span></div> </article> <article class="fx-holo" data-variant="dark" data-pattern="lines" data-fx-tilt data-max="12" aria-label="Sovğa kartasi"> <i class="fx-holo__pattern" aria-hidden="true"></i> <div class="fx-holo__top"><span class="fx-holo__brand">Sovğa kartasi</span><span class="fx-holo__tier">500 000</span></div> <div class="fx-holo__bottom"><span class="fx-holo__owner"><span>Amal qiladi</span><b>31.12.2026</b></span><span class="fx-holo__number">GC-8841</span></div> </article> <article class="fx-holo" data-shape="tall" data-pattern="dots" data-fx-tilt data-max="14" aria-label="Tadbir çiptasi"> <i class="fx-holo__pattern" aria-hidden="true"></i> <div class="fx-holo__top"><span class="fx-holo__brand">IT Park Fest</span><span class="fx-holo__tier">VIP</span></div> <div class="fx-holo__bottom"><span class="fx-holo__owner"><span>24-noyabr · 18:00</span><b>Toşkent</b></span><span class="fx-holo__number">A-12</span></div> </article> </div>
Tokenlar: --fx-border-width-default --fx-color-brand-600 --fx-color-brand-900 --fx-color-neutral-200 --fx-color-neutral-25 --fx-color-neutral-700 --fx-color-neutral-800 --fx-color-neutral-950 --fx-color-pastel-blue --fx-color-pastel-green --fx-color-pastel-pink --fx-color-pastel-purple --fx-color-pastel-yellow --fx-color-white --fx-duration-pulse --fx-ease-standard --fx-font-adjust-display --fx-font-adjust-mono --fx-font-family-display --fx-font-family-mono --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-bold --fx-font-weight-semibold --fx-motion-base --fx-radius-control --fx-radius-overlay --fx-radius-tag --fx-shadow-lg --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-tilt-gx --fx-tilt-gy
Ş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.