CSS: callout

div[class~="instui-callout"] — Amaran maklumat sebaris untuk peringatan atau nota ringkas.

✅ Gunakan Callout apabila:

• Anda perlu menyerlahkan maklumat penting atau peringatan secara sebaris

• Mesej agak ringkas (satu ayat hingga perenggan pendek)

• Amaran harus menarik perhatian tanpa mengganggu aliran utama 🚫 Jangan gunakan Callout apabila:

• Mesej memerlukan interaksi atau berbilang tindakan — gunakan Modal atau Alert Dialog

• Kandungan adalah tumpuan utama halaman — gunakan Card atau susunan Hero sebaliknya

Aksesibiliti

• Pastikan peranan amaran diterapkan dengan betul (role="alert" atau role="status")
• Gunakan kontras warna semantik yang memenuhi piawaian WCAG AA
• Jangan bergantung pada warna sahaja untuk menyampaikan makna

Penggunaan

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

Contoh

Slot

Slot	Penerangan
message	Kandungan mesej amaran

Bahagian

Bahagian	Penerangan
.instui-content	Bekas untuk kandungan teks.
.instui-icon	Ikon pilihan di sebelah kiri kandungan.

Pseudo-elemen

Pseudo-elemen	Penerangan
::before	—

Keadaan

Keadaan	Penerangan
:optional	—

Token digunakan

Token	Jenis	Nilai
--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	—	—

Berkaitan

• alert