CSS: callout ​

div[class~="instui-callout"] — Vgrajeno informativno opozorilo za kratek opomnik ali opombo.

✅ Uporabite Callout, kadar:

  • Potrebno je poudariti pomembne informacije ali opomnike v vrstici

  • Sporočilo je sorazmerno kratko (en stavek do kratkega odstavka)

  • Opozorilo naj pritegne pozornost, ne da bi prekinilo glavni tok 🚫 Ne uporabljajte Callout, kadar:

  • Sporočilo zahteva interakcijo ali več dejanj — uporabite Modal ali Alert Dialog

  • Vsebina je glavni fokus strani — namesto tega uporabite Card ali Hero postavitev

Dostopnost ​

  • Poskrbite, da je vloga opozorila pravilno nastavljena (role="alert" ali role="status")
  • Uporabite semantični kontrast barv, ki izpolnjuje standard WCAG AA
  • Ne zanašajte se samo na barvo za prenašanje pomena

Uporaba ​

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

Sloti ​

SlotOpis
messageVsebina sporočila opozorila

Delii ​

DelOpis
.instui-contentVsebnik za besedilno vsebino.
.instui-iconNeobvezna ikona levo od vsebine.

Psevdo-elementi ​

Psevdo-elementOpis
::before—

Stanja ​

StanjeOpis
:optional—

Porabljeni žetoni ​

TokenTipVrednost
--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——

Sorodno ​