Állás kártyák
A Karrier Portál állás kártya komponensei, amelyek a nyitott pozíciókat jelenítik meg.
Alapértelmezett állás kártya
Az alapértelmezett állás kártya komponens a munkalehetőségek megjelenítésére szolgál, tartalmazva a pozíció nevét, leírását, helyét és egyéb fontos információkat.
MérnökiGyőr, Magyarország
Szoftverfejlesztő mérnök
Fejlessz velünk járművezérlő rendszereket és innovatív megoldásokat az önvezető technológiák területén...
Közzétéve: 2025. április 10.
Felépítés
Az állás kártya a következő elemekből áll:
Kategória tag:
A pozíció kategóriáját jelző címke
Lokáció:
A munkavégzés helye, mindig jól látható
Pozíció neve:
A leghangsúlyosabb elem, nagyobb betűmérettel
Rövid leírás:
A pozíció rövid ismertetése, max. 2-3 sorban
Közzététel ideje:
Mikor jelent meg a hirdetés
CTA gomb:
Piros "Jelentkezés" gomb, a konverzió növelésére
Használati irányelvek
- Konzisztens formátumot használj minden állás kártyán
- A "Jelentkezés" gomb mindig az Audi piros (#f50537) színt használja
- A kártyák interaktívak, hover állapotban árnyékot kapnak
Kódpélda
<div class="bg-white rounded-[4px] shadow-[0_1px_4px_rgba(0,0,0,0.05)] hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)] transition-shadow border border-[#E0E0E0] overflow-hidden">
<div class="p-5">
<div class="flex justify-between mb-3">
<span class="inline-block px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">Mérnöki</span>
<span class="text-[#666666] text-sm">Győr, Magyarország</span>
</div>
<h3 class="text-xl font-medium mb-2">Szoftverfejlesztő mérnök</h3>
<p class="text-[#666666] text-sm mb-4">Fejlessz velünk járművezérlő rendszereket...</p>
<div class="flex justify-between items-center">
<div>
<span class="text-sm text-[#666666]">Közzétéve: 2025. április 10.</span>
</div>
<button class="bg-[#f50537] text-white px-4 py-2 rounded-lg hover:bg-[#940826] transition-colors">Jelentkezés</button>
</div>
</div>
</div>Kompakt állás kártya
A kompakt állás kártya komponens ott alkalmazandó, ahol több pozíciót kell kisebb helyen megjeleníteni, például keresési eredmények listázásakor.
Mérnöki
Szoftverfejlesztő mérnök
Győr, Magyarország
Közzétéve: 2025.04.10.
IT
Frontend fejlesztő
Győr, Magyarország
Közzétéve: 2025.04.08.
HR
HR Specialista
Budapest, Magyarország
Közzétéve: 2025.04.05.
Kódpélda
<UCard class="hover:shadow-lg transition-shadow"><div class="bg-white rounded-[4px] shadow-[0_1px_4px_rgba(0,0,0,0.05)] hover:shadow-[0_2px_8px_rgba(0,0,0,0.1)] transition-shadow border border-[#E0E0E0] overflow-hidden">
<div class="p-4">
<span class="inline-block px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full mb-2">Mérnöki</span>
<h3 class="text-base font-medium mb-1">Szoftverfejlesztő mérnök</h3>
<p class="text-[#666666] text-xs mb-2">Győr, Magyarország</p>
<div class="flex justify-between items-center">
<span class="text-xs text-[#666666]">Közzétéve: 2025.04.10.</span>
<button class="bg-[#f50537] text-white text-xs px-3 py-1 rounded hover:bg-[#940826] transition-colors">Jelentkezés</button>
</div>
</div>
</div>Használati irányelvek
- A kompakt kártyákat rácsos elrendezésben jelenítsd meg
- Mobil nézetben egyoszlopos elrendezésre vált
- A különböző kategóriákat színekkel különböztesd meg
- Minden információs elem kisebb, de megőrzi a hierarchiát
Kiemelt állás kártya
A kiemelt állás kártya komponens a kiemelt, stratégiai fontosságú pozíciók megjelenítésére szolgál. A vizuális kiemelés segít felhívni a figyelmet ezekre a pozíciókra.
Kiemelt pozíció
MérnökiGyőr, Magyarország
Járműipari Automatizálási Mérnök
Fejleszd és optimalizáld az Audi járművek gyártási folyamatait a legmodernebb technológiák alkalmazásával...
Sürgős betöltés
Jellemzők
A kiemelt állás kártya az alábbi elemekkel rendelkezik:
- Piros keret és fejléc a kiemeléshez
- "Kiemelt pozíció" fejléc csillag ikonnal
- Sürgősségi jelzés (opcionális)
- Hangsúlyosabb gomb "Jelentkezz most" szöveggel
- Nagyobb árnyék a jobb kiemelés érdekében
Használati irányelvek
- Csak néhány kiemelt pozíciót jeleníts meg egyszerre
- A sürgős betöltés jelzést csak valóban sürgős pozíciókhoz használd
- A kiemelt kártyákat a lista tetején vagy külön szekcióban helyezd el
Kódpélda
<div class="bg-white rounded-[4px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] border-2 border-[#f50537] overflow-hidden">
<div class="bg-[#f50537] text-white px-4 py-2 flex justify-between items-center">
<span class="font-medium">Kiemelt pozíció</span>
<i class="fa-solid fa-star"></i>
</div>
<div class="p-5">
<!-- Tartalom hasonló az alapértelmezett kártyához -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
<div class="flex items-center">
<i class="fa-solid fa-clock text-[#f50537] mr-2"></i>
<span class="text-sm font-medium text-[#f50537]">Sürgős betöltés</span>
</div>
<button class="bg-[#f50537] text-white px-6 py-2 rounded-lg hover:bg-[#940826] transition-colors">Jelentkezz most</button>
</div>
</div>
</div>