CSS: hero

div[class~="instui-hero"] — Επικεφαλίδα πλήρους πλάτους με τίτλο, υπότιτλο και προαιρετική εικόνα φόντου.

✅ Χρησιμοποιήστε το Hero όταν:

• Χρειάζεστε μια εμφανή κεφαλίδα σελίδας με οπτική ιεραρχία

• Η σελίδα ωφελείται από ένα μεγάλο, εντυπωσιακό τμήμα έναρξης

• Θέλετε να συμπεριλάβετε εικόνες φόντου ή διαβαθμίσεις 🚫 Μη χρησιμοποιείτε το Hero όταν:

• Δημιουργείτε απλή κεφαλίδα σελίδας — χρησιμοποιήστε το Page-Layout αντί γι' αυτό

• Το hero ανταγωνίζεται σημαντικό περιεχόμενο — προτεραιοποιήστε την αναγνωσιμότητα

Προσβασιμότητα

• Βεβαιωθείτε ότι ο τίτλος βρίσκεται σε tag <h1> για σημασιολογική δομή
• Εάν χρησιμοποιείτε εικόνες φόντου, παρέχετε επαρκή αντίθεση χρωμάτων για το κείμενο
• Αποφύγετε την αυτόματη αναπαραγωγή βίντεο ή animation που μπορεί να αποσπάσει την προσοχή από το περιεχόμενο

Χρήση

@import "@pantoken/plugin-layouts/layouts.css";

Παραδείγματα

Θέσεις (slots)

Θέση (slot)	Περιγραφή
subtitle	Περιεχόμενο υπότιτλου Hero
title	Περιεχόμενο τίτλου Hero

Μέρη

Μέρος	Περιγραφή
.instui-actions	Προαιρετικά κουμπιά ενέργειας ή σύνδεσμοι.
.instui-background	Προαιρετικό στρώμα φόντου (εικόνα ή διαβάθμιση).
.instui-content	Δοχείο για το κείμενο και τις ενέργειες του hero.
.instui-overlay	Προαιρετική ημιδιαφανής επικάλυψη για αντίθεση κειμένου.
.instui-subtitle	Προαιρετικό υποστηρικτικό κείμενο ή περιγραφή.
.instui-title	Κύριος τίτλος hero (συνήθως <h1>).

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
::before	—

Καταστάσεις

Κατάσταση	Περιγραφή
:optional	—

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Σχετιζόμενα

• card