Kártyák
A kártyák tartalmi egységeket biztosítanak, amelyek segítenek az információk rendezett, könnyen értelmezhető megjelenítésében a HR portálon.
Alapvető kártyák
Az alapvető kártyák az információk rendszerezett megjelenítésére szolgálnak, tiszta vizuális határokkal és struktúrával.
Egyszerű kártya
Szabadságkérés
Az éves szabadságok tervezése és igénylése a HR rendszeren keresztül.
Bérelszámolás
Bérlapok és juttatások áttekintése, adózási információk kezelése.
Képzések
Belső és külső oktatások, továbbképzési lehetőségek és jelentkezés.
Kódpélda
<div class="bg-white border border-[#E0E0E0] rounded-[4px] overflow-hidden shadow-[0_1px_4px_rgba(0,0,0,0.05)]">
<div class="p-4">
<h4 class="text-lg font-medium mb-2">Szabadságkérés</h4>
<p class="text-[#666666] mb-4">Az éves szabadságok tervezése és igénylése a HR rendszeren keresztül.</p>
<UButton color="audi-red" variant="link" class="flex items-center"><span>Tovább</span><i class="fa-solid fa-arrow-right ml-1 text-xs"></i></UButton>
</div>
</div>
Kártya fejléccel
HR Hírek
Új cafeteria rendszer kerül bevezetésre 2025 második félévétől. A részletekről hamarosan tájékoztatást küldünk.
Közelgő események
Csapatépítő nap a gyártási osztály számára. Helyszín: Audi látogatóközpont, időpont: 2025.05.20.
Figyelemfelhívás
Kérjük minden munkatársunkat a munkavédelmi előírások fokozott betartására a gyártási területeken.
Kódpélda
<div class="bg-white border border-[#E0E0E0] rounded-[4px] overflow-hidden shadow-[0_1px_4px_rgba(0,0,0,0.05)]">
<div class="bg-[#f50537] text-white p-3">
<h4 class="font-medium">HR Hírek</h4>
</div>
<div class="p-4">
<p class="text-[#666666] mb-4">Új cafeteria rendszer kerül bevezetésre 2025 második félévétől. A részletekről hamarosan tájékoztatást küldünk.</p>
<div class="text-sm text-[#999999]">2025.04.10.</div>
</div>
</div>
Tartalmi kártyák
A tartalmi kártyák különböző típusú információkat, dokumentumokat és funkciókat jeleníthetnek meg a HR portálon.
Dokumentum kártya
Munkavállalói kézikönyv
HR szabályzatok és eljárásrendek gyűjteménye
Szabadságkérelem
Szabadságigényléshez szükséges űrlap
Kódpélda
<div class="bg-white border border-[#E0E0E0] rounded-[4px] overflow-hidden shadow-[0_1px_4px_rgba(0,0,0,0.05)]">
<div class="flex p-4">
<div class="flex-shrink-0 mr-4">
<div class="w-12 h-14 bg-[#F5F5F5] border border-[#E0E0E0] rounded-[4px] flex items-center justify-center">
<i class="fa-solid fa-file-pdf text-[#D32F2F] text-xl"></i>
</div>
</div>
<div class="flex-grow">
<h4 class="text-lg font-medium mb-1">Munkavállalói kézikönyv</h4>
<p class="text-[#666666] text-sm mb-2">HR szabályzatok és eljárásrendek gyűjteménye</p>
<div class="flex items-center text-sm text-[#999999]">
<span>PDF • 2.5 MB</span>
<span class="mx-2">•</span>
<span>Frissítve: 2025.03.15.</span>
</div>
</div>
<div class="flex-shrink-0 ml-4 flex items-start">
<button class="text-[#f50537] hover:text-[#186c3f]">
<i class="fa-solid fa-download"></i>
</button>
</div>
</div>
</div>
Állapot kártya
Szabadság jóváhagyva
2025.07.15. - 2025.07.30.
Továbbképzési kérelem elbírálás alatt
Projektmenedzsment alapok (online kurzus)
Kódpélda
<div class="bg-white border border-[#E0E0E0] rounded-[4px] overflow-hidden shadow-[0_1px_4px_rgba(0,0,0,0.05)]">
<div class="p-4">
<div class="flex items-center mb-3">
<div class="w-3 h-3 rounded-full bg-[#f50537] mr-2"></div>
<h4 class="text-lg font-medium">Szabadság jóváhagyva</h4>
</div>
<p class="text-[#666666] mb-4">2025.07.15. - 2025.07.30.</p>
<div class="flex justify-between text-sm">
<span class="text-[#666666]">Jóváhagyó: Nagy Péter</span>
<span class="text-[#f50537]">12 munkanap</span>
</div>
</div>
</div>
Interaktív kártyák
Az interaktív kártyák különböző interakciós lehetőségeket biztosítanak, mint például kattintás, kibontás vagy állapotváltoztatás.
Kibontható kártya
Munkahelyi étkeztetés
Az Audi Hungaria központi éttermében napi háromszori étkezés biztosított a munkavállalók számára. A menü előre megtekinthető és foglalható a HR portálon keresztül.
Egészségügyi szolgáltatások
Sportolási lehetőségek
Kódpélda
<div class="bg-white border border-[#E0E0E0] rounded-[4px] overflow-hidden shadow-[0_1px_4px_rgba(0,0,0,0.05)]">
<div class="p-4 flex justify-between items-center cursor-pointer hover:bg-[#F5F5F5]">
<h4 class="text-lg font-medium">Munkahelyi étkeztetés</h4>
<i class="fa-solid fa-chevron-down text-[#666666]"></i>
</div>
<div class="p-4 pt-0 border-t border-[#E0E0E0]">
<p class="text-[#666666] mb-4">
Az Audi Hungaria központi éttermében napi háromszori étkezés biztosított a munkavállalók számára.
A menü előre megtekinthető és foglalható a HR portálon keresztül.
</p>
<button class="text-[#f50537] hover:underline">Étlap megtekintése</button>
</div>
</div>