CSS: callout ​

div[class~="instui-callout"] — एक संक्षिप्त अनुस्मारक या नोट के लिए इनलाइन सूचना अलर्ट।

✅ Callout का उपयोग करें जब:

  • आपको महत्वपूर्ण जानकारी या अनुस्मारक को इनलाइन हाइलाइट करने की जरूरत हो

  • संदेश अपेक्षाकृत संक्षिप्त हो (एक वाक्य से एक छोटे पैरे तक)

  • अलर्ट मुख्य प्रवाह को बाधित किए बिना ध्यान आकर्षित करे 🚫 Callout का उपयोग न करें जब:

  • संदेश में इंटरएक्शन या कई क्रियाओं की आवश्यकता हो — Modal या Alert Dialog का उपयोग करें

  • सामग्री पृष्ठ का मुख्य फोकस हो — इसके बजाय Card या Hero लेआउट का उपयोग करें

एक्सेसिबिलिटी ​

  • सुनिश्चित करें कि alert रोल सही ढंग से लागू किया गया है (role="alert" या role="status")
  • semantic रंग विरोधाभास का उपयोग करें जो WCAG AA मानकों को पूरा करता हो
  • केवल रंग पर अर्थ व्यक्त करने का भरोसा न करें

उपयोग ​

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

स्लॉट्स ​

स्लॉटविवरण
messageअलर्ट संदेश की सामग्री

पार्ट्स ​

भागविवरण
.instui-contentपाठ सामग्री के लिए कंटेनर।
.instui-iconसामग्री के बाईं ओर वैकल्पिक आइकन।

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::before—

स्टेट्स ​

स्थितिविवरण
:optional—

उपयोग किये गए टोकन ​

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

संबंधित ​