CSS: callout

div[class~="instui-callout"] — Informacyjne powiadomienie inline dla krótkiego przypomnienia lub notatki.

✅ Użyj Callout kiedy:

• Musisz wyróżnić ważne informacje lub przypomnienia inline

• Wiadomość jest stosunkowo krótka (zdanie do krótkiego akapitu)

• Powiadomienie powinno przyciągać uwagę bez przerywania głównego toku 🚫 Nie używaj Callout gdy:

• Wiadomość wymaga interakcji lub wielu działań — użyj Modal lub Alert Dialog

• Treść jest głównym punktem strony — zamiast tego użyj Card lub układu Hero

Dostępność

• Upewnij się, że rola alertu jest poprawnie przypisana (role="alert" lub role="status")
• Użyj semantycznego kontrastu kolorów spełniającego normy WCAG AA
• Nie polegaj wyłącznie na kolorze, aby przekazać znaczenie

Użycie

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

Przykłady

Sloty

Slot	Opis
message	Treść komunikatu alertu

Części

Część	Opis
.instui-content	Kontener na treść tekstową.
.instui-icon	Opcjonalna ikona po lewej stronie treści.

Pseudo-elementy

Pseudo-element	Opis
::before	—

Stany

Stan	Opis
:optional	—

Zużyte tokeny

Token	Typ	Wartość
--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	—	—

Powiązane

• alert