Körsatiş · pattern
Fokusli kartalar
Portfolio, loyiha yoki jamoa töri: bitta karta ustiga borilganda (yoki klaviatura bilan fokuslanganda) qolgan kartalar xiralaşadi va biroz kiçrayadi — köz bitta kartaga tuşadi (Aceternity Focus Cards). Sarlavha va izoh kartaning pastidan qoronği gradient ustida çiqadi; hover yöq qurilmada (telefon) sarlavha doim körinadi. Faqat CSS (:has). data-caption="always" — sarlavha doim körinadi; data-ratio="wide" — 4:3 kartalar; data-size — ustun kengligi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-caption | hoveralways sarlavha doim körinadi | hover |
data-ratio | portrait 4:5wide 4:3 | portrait |
data-size | smmdlg | md |
Anatomiya
- root
.fx-focuscardsşart - item
.fx-focuscards__itemşart - media
.fx-focuscards__mediaixtiyoriy - body
.fx-focuscards__bodyixtiyoriy - title
.fx-focuscards__titleixtiyoriy - meta
.fx-focuscards__metaixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Keyingi karta; qolganlari xiralaşadi, sarlavha çiqadi |
| Enter | Kartani oçadi |
Har karta — bitta havola (içida sarlavha va izoh matni), şuning uçun ekran öquvçi butun nomni öqiydi. Klaviatura fokusi xuddi hover kabi qolganlarini xiralaştiradi va sarlavhani körsatadi. Rasm bezak bölsa aria-hidden yoki alt="". Harakat kamaytirilsa kiçrayiş yöq, xiralik holat sifatida qoladi; forced-colors'da sarlavha doim körinadi.
Kod
AI uçun: qaçon işlatiladi
- Landing sahifadagi portfolio yoki «Bizning loyihalar» töri.
- Jamoa a'zolari, kurslar yoki mahsulot kategoriyalari — rasm asosiy bölganda.
- Rasmlar galereyasi (kattalaştirib köriş bilan) →
gallery - Matnli xususiyatlar töri →
features - Kartalarda muhim amal tugmalarini yaşirmang — sarlavha butun karta havolasi bölsin.
- Ilova içidagi röyxat yoki jadval örniga işlatmang — bu körgazma (portfolio, landing) uçun.
- Rasm ustidagi matnni gradientsiz qoldirmang — kontrast yöqoladi.
npx foxui add focuscards
<ul class="fx-focuscards" data-size="sm" aria-label="Loyihalar"> <li><a class="fx-focuscards__item" href="#"><span class="fx-focuscards__media" aria-hidden="true" style="background:radial-gradient(circle at 30% 25%, var(--fx-bg-category-blue-subtle), transparent 55%), linear-gradient(150deg, var(--fx-bg-category-blue), var(--fx-bg-category-purple))"></span><span class="fx-focuscards__body"><span class="fx-focuscards__title">Samarqand Grand mehmonxonasi</span><span class="fx-focuscards__meta">Veb-sayt · bron qiliş</span></span></a></li> <li><a class="fx-focuscards__item" href="#"><span class="fx-focuscards__media" aria-hidden="true" style="background:radial-gradient(circle at 30% 25%, var(--fx-bg-category-green-subtle), transparent 55%), linear-gradient(150deg, var(--fx-bg-category-green), var(--fx-bg-category-blue))"></span><span class="fx-focuscards__body"><span class="fx-focuscards__title">Tong maktabi</span><span class="fx-focuscards__meta">LMS · 1 200 öquvçi</span></span></a></li> <li><a class="fx-focuscards__item" href="#"><span class="fx-focuscards__media" aria-hidden="true" style="background:radial-gradient(circle at 30% 25%, var(--fx-bg-category-coral-subtle), transparent 55%), linear-gradient(150deg, var(--fx-bg-category-coral), var(--fx-bg-category-yellow))"></span><span class="fx-focuscards__body"><span class="fx-focuscards__title">Zarafşon Tekstil</span><span class="fx-focuscards__meta">ERP · ombor va savdo</span></span></a></li> <li><a class="fx-focuscards__item" href="#"><span class="fx-focuscards__media" aria-hidden="true" style="background:radial-gradient(circle at 30% 25%, var(--fx-bg-category-pink-subtle), transparent 55%), linear-gradient(150deg, var(--fx-bg-category-pink), var(--fx-bg-category-purple))"></span><span class="fx-focuscards__body"><span class="fx-focuscards__title">Mehr klinikasi</span><span class="fx-focuscards__meta">Helpdesk · navbat</span></span></a></li> </ul>
Tokenlar: --fx-bg-muted --fx-bg-overlay --fx-bg-static-light --fx-border-color-focus --fx-border-width-focus --fx-ease-emphasized --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-weight-semibold --fx-line-height-tight --fx-motion-base --fx-motion-press --fx-motion-shift-md --fx-motion-slow --fx-radius-surface --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-4