Karkas · pattern
Karyera sahifasi
Marketing saytining «Karyera / Vakansiyalar» sahifasi (4.177): sarlavha, afzalliklar töri (nega biz bilan işlaş), bölim filtri (fx-chip, aria-pressed — saralaşni ilova qiladi) va bölimlar böyiça guruhlangan vakansiyalar röyxati. Har qator — lavozim (havola butun qatorni bosiladigan qiladi), şahar, iş turi, tajriba va maoş oraliği; yangi vakansiya data-new bilan «Yangi» belgisini oladi. Oçiq vakansiya yöq bölsa — .fx-careers__empty (rezyume yuboriş taklifi). data-variant: list (standart) yoki cards.
Karyera
Özbekistonning dizayn tizimini birga quraylik
Kiçik jamoa, katta ta'sir: siz yozgan komponentni minglab dasturçi işlatadi.
- Masofaviy yoki ofisdaToşkent ofisi yoki uydan — özingiz tanlaysiz.
- Öqiş byudjetiYiliga 6 000 000 sömgaça kurs va konferensiyalar.
- Tibbiy suğurtaSiz va oilangiz uçun, birinçi oydan.
Muhandislik 2 ta
Senior front-end dasturçi
25–35 mln sömNode.js dasturçi (CLI va MCP)
20–28 mln söm
Dizayn 1 ta
Mahsulot dizayneri
18–24 mln söm
Qöllab-quvvatlaş 1 ta
Mijozlar bilan işlaş mutaxassisi
8–10 mln söm
Rezyumengizni yuboring — mos örin oçilganda birinçi bölib yozamiz.
Rezyume yuborişVariantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | list çiziqli qatorlarcards kartalar töri | list |
data-new | on «Yangi» belgisi | off |
Anatomiya
- root
.fx-careersşart - head
.fx-careers__headixtiyoriy - eyebrow
.fx-careers__eyebrowixtiyoriy - title
.fx-careers__titleixtiyoriy - text
.fx-careers__textixtiyoriy - perks
.fx-careers__perksixtiyoriy - perk
.fx-careers__perkixtiyoriy - filters (fx-chip)
.fx-careers__filtersixtiyoriy - groups
.fx-careers__groupsixtiyoriy - group
.fx-careers__groupixtiyoriy - group-title
.fx-careers__group-titleixtiyoriy - group-count
.fx-careers__group-countixtiyoriy - list
.fx-careers__listşart - job
.fx-careers__jobşart - job-title
.fx-careers__job-titleşart - link
.fx-careers__linkşart - meta
.fx-careers__metaixtiyoriy - salary
.fx-careers__salaryixtiyoriy - empty
.fx-careers__emptyixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Filtr chip'lari, keyin har vakansiya — bitta töxtaş |
| Enter | Vakansiya sahifasini oçadi |
Guruhlar <section aria-labelledby> + h3, har vakansiya h4 içida havola — ekran öquvçi sarlavhalar böyiça sakray oladi. Butun qator bosiladi, lekin Tab'da bitta töxtaş (havola), fokus halqasi qator atrofida (:has(:focus-visible)). Filtr chip'lari — aria-pressed tugma (yoki sahifa havolasi — aria-current="page"). «Yangi» belgisi matn sifatida öqiladi (::after content).
Naqş: WAI-ARIA APG landmarks · rol region
Kod
AI uçun: qaçon işlatiladi
- Kompaniya saytining «Karyera» sahifasi.
- Landing'da «Biz bilan işlang» bölimi (1–3 vakansiya).
- Ilova içidagi nomzodlar va bosqiçlar (ATS) →
board - Bitta vakansiyaning töliq matni →
prose - Maoşni yaşirmang, agar imkon bölsa — oraliq (25–35 mln söm) körsatilgan vakansiyaga köproq ariza keladi.
- Vakansiya qatorida içma-iç tugmalar qöymang — butun qator bitta havola (::after qoplama), ikkinçi bosiladigan narsa bölmasin.
- Yopilgan vakansiyani röyxatda qoldirmang — olib taşlang yoki böş holatni körsating.
npx foxui add careers
<section class="fx-careers" aria-labelledby="cr-t">
<header class="fx-careers__head"><p class="fx-careers__eyebrow">Karyera</p><h2 class="fx-careers__title" id="cr-t">Özbekistonning dizayn tizimini birga quraylik</h2><p class="fx-careers__text">Kiçik jamoa, katta ta'sir: siz yozgan komponentni minglab dasturçi işlatadi.</p></header>
<ul class="fx-careers__perks">
<li class="fx-careers__perk"><strong>Masofaviy yoki ofisda</strong>Toşkent ofisi yoki uydan — özingiz tanlaysiz.</li>
<li class="fx-careers__perk"><strong>Öqiş byudjeti</strong>Yiliga 6 000 000 sömgaça kurs va konferensiyalar.</li>
<li class="fx-careers__perk"><strong>Tibbiy suğurta</strong>Siz va oilangiz uçun, birinçi oydan.</li>
</ul>
<ul class="fx-careers__filters" aria-label="Bölim böyiça">
<li><button class="fx-chip" type="button" aria-pressed="true">Hammasi <span class="fx-chip__count">4</span></button></li>
<li><button class="fx-chip" type="button" aria-pressed="false">Muhandislik <span class="fx-chip__count">2</span></button></li>
<li><button class="fx-chip" type="button" aria-pressed="false">Dizayn <span class="fx-chip__count">1</span></button></li>
<li><button class="fx-chip" type="button" aria-pressed="false">Qöllab-quvvatlaş <span class="fx-chip__count">1</span></button></li>
</ul>
<div class="fx-careers__groups">
<section class="fx-careers__group" aria-labelledby="cr-g1">
<h3 class="fx-careers__group-title" id="cr-g1">Muhandislik <span class="fx-careers__group-count">2 ta</span></h3>
<ul class="fx-careers__list">
<li class="fx-careers__job" data-new><h4 class="fx-careers__job-title"><a class="fx-careers__link" href="#">Senior front-end dasturçi</a></h4><ul class="fx-careers__meta"><li>Toşkent</li><li>Töliq stavka</li><li>Gibrid</li></ul><span class="fx-careers__salary">25–35 mln söm</span></li>
<li class="fx-careers__job"><h4 class="fx-careers__job-title"><a class="fx-careers__link" href="#">Node.js dasturçi (CLI va MCP)</a></h4><ul class="fx-careers__meta"><li>Masofaviy</li><li>Töliq stavka</li><li>3+ yil tajriba</li></ul><span class="fx-careers__salary">20–28 mln söm</span></li>
</ul>
</section>
<section class="fx-careers__group" aria-labelledby="cr-g2">
<h3 class="fx-careers__group-title" id="cr-g2">Dizayn <span class="fx-careers__group-count">1 ta</span></h3>
<ul class="fx-careers__list">
<li class="fx-careers__job"><h4 class="fx-careers__job-title"><a class="fx-careers__link" href="#">Mahsulot dizayneri</a></h4><ul class="fx-careers__meta"><li>Toşkent</li><li>Töliq stavka</li></ul><span class="fx-careers__salary">18–24 mln söm</span></li>
</ul>
</section>
<section class="fx-careers__group" aria-labelledby="cr-g3">
<h3 class="fx-careers__group-title" id="cr-g3">Qöllab-quvvatlaş <span class="fx-careers__group-count">1 ta</span></h3>
<ul class="fx-careers__list">
<li class="fx-careers__job" data-new><h4 class="fx-careers__job-title"><a class="fx-careers__link" href="#">Mijozlar bilan işlaş mutaxassisi</a></h4><ul class="fx-careers__meta"><li>Samarqand</li><li>Yarim stavka</li><li>Özbek va rus tillari</li></ul><span class="fx-careers__salary">8–10 mln söm</span></li>
</ul>
</section>
</div>
<div class="fx-careers__empty" hidden><strong>Hozirça oçiq vakansiya yöq</strong><p>Rezyumengizni yuboring — mos örin oçilganda birinçi bölib yozamiz.</p><a class="fx-btn" href="mailto:[email protected]">Rezyume yuboriş</a></div>
</section>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --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-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-line-height-tight --fx-motion-fast --fx-motion-shift-sm --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary