Komponensek — kitchen sink
Minden komponens minden állapotban — jobb felül válthatsz témát.
Gombok
változatok · méretek · állapotok
Űrlapelemek
állapotok: alap · fókusz · hiba · letiltott · ikonos
Érvénytelen e-mail cím.
Súgószöveg: az inputok kitöltött hátterűek, fókusznál teál keret + surface háttér.
A csatorna megadása kötelező.
Jelölők és kapcsolók
checkbox (teál) · radio (indigó) · switch — sín: --rail
Csúszka és folyamatjelző
minden sín --rail · gradiens csak kiemelt folyamatnál
Kiválasztók
szűrő chipek · tag input · tabok csúszó jelölővel
87,2% foglaltság · 4,22 M Ft bevétel · 3 érkező vendég ma.
Visszajelzés
badge · tooltip · toast — emelt felület, inverz tilos
A státuszt az ikon színe hordozza; a felület surface, hajszálkerettel és shadow-pop árnyékkal — hogy kártyán is elváljon.
Kártyatípusok
alap · kiemelt (gradiens keret) · hero (teljes gradiens)
Kiemelt kártya képernyőnként legfeljebb 1–2, hero legfeljebb 1. Kártyán keret és árnyék nincs — a tónuskülönbség választ el.
Fejléces kártya: cím, leírás és jobbra igazított státusz.
A hero kártya KPI-célra való (label + nagy érték + delta) — hosszabb folyó szöveget a gradiensen nem viszünk el kontrasztban.
Overlay elemek
modális (mobilon alsó lap) · oldalsó fiók · lenyíló menü
Az „Átütemezés” almenüje egymásba ágyazott — a chevron jobbra mutat.
Lenyíló kártyák
animált magasság (--dur-2) · forgó chevron · egymásba ágyazva
Inline megerősítés
kis tétű, soralapú törlés — nincs modál
A törlés-ikon helyben danger „Biztos?” gombbá vált; ~3 mp után magától visszaáll, Escape-re azonnal.
Táblázat — mobil minta (a): kártyásítás
sorkártyás minta · nincs cellakeret, nincs zebra · 768px alatt a sor kártyává alakul
| Vendég | Lakás | Időszak | Összeg | Állapot |
|---|---|---|---|---|
| Weber, AnnaWeber, Anna | Király u. 12/A | júl. 18–21. | 142 500 Ft | Visszaigazolt |
| Rossi, MarcoRossi, Marco | Dob u. 8. II/5 | júl. 18–24. | 318 000 Ft | Fizetésre vár |
| Dupont, ClaireDupont, Claire | Szondi u. 30. | júl. 20–27. | 402 500 Ft | Folyamatban |
Húzd 768px alá az ablakot: a fejléc eltűnik, a sor kártyává alakul, a cellák elé a saját rovatnevük kerül. Az első cella szándékosan label nélküli — az a kártya címe.
Széles táblázat — mobil minta (b): görgetés rögzített oszloppal
sok numerikus oszlop · az első oszlop helyben marad · ez a minta szándékosan görget
| Lakás | Menedzser | Foglaltság | ADR | Bevétel | Értékelés | Állapot | Műveletek |
|---|---|---|---|---|---|---|---|
| Király u. 12/A | Kiss Bori | 92% | 47 500 Ft | 1 312 000 Ft | 4,91 | Rendben | |
| Dob u. 8. II/5 | Tóth Ádám | 88% | 53 000 Ft | 1 401 000 Ft | 4,86 | Karbantartás | |
| Hunyadi tér 4. | Kiss Bori | 74% | 41 200 Ft | 912 400 Ft | 4,72 | Árazás fut | |
| Szondi u. 30. | Nemes Lili | 95% | 57 500 Ft | 1 638 700 Ft | 4,95 | Rendben | |
| Jókai u. 22. I/3 | Tóth Ádám | 61% | 38 900 Ft | 723 500 Ft | 4,55 | Felülvizsgálat |
1. oldal a 12-ből · mobilon a gombok 44px-esek.
Lépések
kész = teál · aktuális = indigó · a lépésvonal --rail (mobilon függőleges)
- Alapadatok — kész
- 2Árazás — folyamatban
- 3Fotók — hátralévő
- 4Publikálás — hátralévő
Üres állapot és skeleton
tárgyilagos szöveg, lucide ikon, nincs emoji · shimmer: --tonal → --tonal-2
Módosítsd a szűrőket, vagy rögzíts új foglalást kézzel.
prefers-reduced-motion mellett a shimmer leáll, a tonális blokk marad — a betöltés tényét az aria-busy és a sr-only szöveg jelenti be.
Adatmegjelenítés
avatar (+ csoport, .with-avatar) · idővonal · fa nézet
- Tulajdonos
- Horváth Gábor
- Menedzser
- Kiss BoriKiss Bori
- Állapot
- Rendben
- 11:42Naptár-szinkron lefutott — 42 lakás frissült.
- 10:15Weber, Anna foglalása visszaigazolva (Airbnb).
- 09:03Árazás frissítve — hétvégi felár +8%.
- tegnapKarbantartás lezárva — Dob u. 8. klíma.
VI. Terézváros
Király u. 12.
Dob u. 8.
VII. Erzsébetváros
Naptár és dátumtartomány
foglaltsági naptár · tartomány-választó — az állapotot mintázat és szöveg is hordozza
- 1., szabad, 42 000 Ft
- 2., foglalt, Müller ×4
- 3., foglalt, Müller
- 4., foglalt, Müller
- 5., szabad, 45 000 Ft
- 6., foglalt, Sato ×2
- 7., foglalt, Sato
- 8., foglalt, Sato
- 9., foglalt, Sato
- 10., szabad, 44 000 Ft
- 11., foglalt, Novak ×3
- 12., foglalt, Novak
- 13., blokkolt
- 14., blokkolt
- 15., szabad, 46 000 Ft
- 16., szabad, 46 000 Ft
- 17., szabad, 48 000 Ft
- 18., foglalt, Weber ×2, ma
- 19., foglalt, Weber
- 20., foglalt, Weber
- 21., szabad, 47 000 Ft
- 22., szabad, 47 000 Ft
- 23., foglalt, Ionescu ×2
- 24., foglalt, Ionescu
- 25., foglalt, Ionescu
- 26., foglalt, Ionescu
- 27., szabad, 45 000 Ft
- 28., szabad, 45 000 Ft
- 29., szabad, 45 000 Ft
- 30., szabad, 46 000 Ft
- 31., szabad, 49 000 Ft
Kattints egy napra új tartomány kezdéséhez, majd egy másikra a lezárásához — visszafelé kattintva a két végpont helyet cserél.
Idővonalas naptár
egy év · 18 lakás · virtualizált — a sávok metszés szerint szűrődnek, nem kezdőnap szerint
Görgesd vízszintesen: a lakásnév-oszlop és a fejléc helyben marad. A sávok abszolút pozíciót kapnak az év koordináta-rendszerében, és metszés szerint szűrődnek — ezért a hetekkel korábban kezdődő, de ide belógó foglalások is látszanak. A háttérrács (napvonalak, hétvégék) egyetlen CSS-gradiens, nem 6570 cella-elem. A sávok fél nappal el vannak tolva: a váltónap délelőttje még a távozó vendégé (kijelentkezés ~10:00), délutánja már az érkezőé (bejelentkezés ~15:00) — így a két foglalás nem látszik ütközni ugyanazon a napon.
Chart-kártyák
watermark + PNG-letöltés (BPDBv2-port) · a paletta a --chart-* tokenekből
- aug: 38
- szep: 46
- okt: 41
- nov: 57
- dec: 52
- jan: 66
- feb: 61
- már: 72
- ápr: 68
- máj: 81
- jún: 88
- júl: 100
2026. július
- Airbnb
- 62%
- Booking
- 27%
- Direkt
- 8%
- Egyéb
- 3%
Halmozott sávok — sok kategória
kategorikus paletta (6 hely, fix sorrend) vs. szekvenciális rámpa (rendezett kategóriákhoz)
Kategorikus paletta — a típusok közt nincs sorrend. Hat hely; a hetedik kategória „Egyéb”-be megy.
- Szálloda
- Magánszálláshely
- Egyéb szálláshely
- Közösségi szálláshely
- Kollégium
- Egyéb
Szekvenciális rámpa — az árkategóriák RENDEZETTEK (olcsó→luxus), ezért egy hue világostól sötétig, nem szivárvány.
- Olcsó
- Gazdaságos
- Közepes
- Prémium
- Luxus
Lenyitható adat-kártya
BPDBv2-port: teljes fejléc kattintható · animált magasság · inaktív = tonális, nem opacity
- Foglaltság
- 92% (12 hó)
- ADR
- 47 500 Ft
- NTAK
- MA26011482
Kanban tábla
húzd át a kártyákat · megfogott = teál gyűrű + dőlés · cél-oszlop = sötétebb vályú · éles appban @dnd-kit köti be
Inbox2 deal
Kapcsolatfelvétel1 deal
Ajánlati fázis1 deal
Értesítő sáv
beágyazott, tartós státusz-üzenet — nem toast (az a múló visszajelzés) és nem lebegő elem
Popover és multi-select szűrő
chip-trigger indigó darabszámmal · kereshető opciólista teál pipával · a panel lebegő elem
A szűrő-chip aktív darabszáma indigó (kiválasztás), a lista pipája teál (visszaigazolás) — a panel a lebegő elemek nyelvén áll.
Globális kereső
csoportosított találatok · ↑/↓ + Enter billentyű-navigáció · mobilon teljes képernyős overlay
↑/↓ lépked, Enter választ, Escape zár. 768px alatt megnyitáskor teljes képernyős overlay-be vált — húzd keskenyre az ablakot.
Fájl-feltöltés
ejtő-zóna + fájl-lista + folyamatjelző — a feltöltés maga a hívó dolga
Chat-elemek
agent = teál csempe + tonális buborék · user = indigó-soft · tool-sor spinner/pipa · streaming kurzor
Fotós avatar
src-vel fotó, hibánál automatikus monogram-fallback · avatar-stack változatlanul működik
Nagy PéterNagy Péter (hibás URL → monogram)Donut-diagram
CSS/SVG, lib nélkül · a jelmagyarázat kötelező rész · 6+ kategóriát a hívó von Egyébbe
- Fejlesztés
- 62 ó
- Hívások
- 31 ó
- Support
- 22 ó
- Egyéb
- 13 ó
- Csak Airbnb
- 2610
- Airbnb + Booking
- 1301
- Csak Booking
- 901
Év-idővonal
sorok = emberek, oszlopok = napok · minták hordozzák a típust · a mai napra görget