CSS: callout

div[class~="instui-callout"] — Kısa bir hatırlatma veya not için satır içi bilgi uyarısı.

✅ Callout kullanın:

• Önemli bilgileri veya hatırlatmaları satır içinde vurgulamanız gerektiğinde

• Mesaj nispeten kısa olduğunda (bir cümle ile kısa bir paragraf arası)

• Uyarı, ana akışı bölmeden dikkat çekmeli 🚫 Callout kullanmayın:

• Mesaj etkileşim veya birden çok işlem gerektiriyorsa — Modal veya Alert Dialog kullanın

• İçerik sayfanın ana odağı ise — bunun yerine Card veya Hero düzeni kullanın

Erişilebilirlik

• alert rolünün doğru uygulandığından emin olun (role="alert" veya role="status")
• WCAG AA standartlarını karşılayan anlamsal renk kontrastı kullanın
• Anlam iletmek için yalnızca renge güvenmeyin

Kullanım

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

Yuvalar

Yuva	Açıklama
message	Uyarı mesajı içeriği

Bölümler

Parça	Açıklama
.instui-content	Metin içeriği için kapsayıcı.
.instui-icon	İçeriğin solunda isteğe bağlı simge.

Sözde elemanlar

Sözde eleman	Açıklama
::before	—

Durumlar

Durum	Açıklama
:optional	—

Tüketilen tokenler

Token	Tür	Değer
--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	—	—

İlgili

• alert