CSS: callout

div[class~="instui-callout"] — Ενσωματωμένη ειδοποίηση πληροφοριών για μια σύντομη υπενθύμιση ή σημείωση.

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

• Χρειάζεται να επισημάνετε σημαντικές πληροφορίες ή υπενθυμίσεις ενσωματωμένα

• Το μήνυμα είναι σχετικά σύντομο (μια πρόταση έως μια μικρή παράγραφος)

• Η ειδοποίηση πρέπει να τραβάει την προσοχή χωρίς να διακόπτει τη ροή 🚫 Don't use Callout when:

• Το μήνυμα απαιτεί αλληλεπίδραση ή πολλαπλές ενέργειες — use a Modal or Alert Dialog

• Το περιεχόμενο αποτελεί το κύριο επίκεντρο της σελίδας — use a Card or Hero layout instead

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

• Βεβαιωθείτε ότι ο ρόλος alert εφαρμόζεται σωστά (role="alert" ή role="status")
• Χρησιμοποιήστε σημασιολογική αντίθεση χρωμάτων που πληροί τα πρότυπα WCAG AA
• Μην βασίζεστε αποκλειστικά στο χρώμα για να μεταδώσετε νόημα

Χρήση

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

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

Θέσεις (slots)

Θέση (slot)	Περιγραφή
message	Περιεχόμενο μηνύματος ειδοποίησης

Μέρη

Μέρος	Περιγραφή
.instui-content	Δοχείο για το κείμενο περιεχομένου.
.instui-icon	Προαιρετικό εικονίδιο αριστερά του περιεχομένου.

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

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

Καταστάσεις

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

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

Token	Τύπος	Τιμή
--instui-color-info-background	—	—
--instui-color-info-border	—	—
--instui-color-info-text	—	—
--instui-radius-medium	—	—
--instui-size-small	<length>	—
--instui-space-medium	—	—
--instui-space-small	—	—

Σχετιζόμενα

• alert