CSS: hero

div[class~="instui-hero"] — शीर्षक, उपशीर्षक और वैकल्पिक बैकग्राउंड छवि के साथ फुल-चौड़ाई हेडर सेक्शन।

✅ Hero का उपयोग तब करें:

• आपको दृश्य पदानुक्रम के साथ एक प्रमुख पेज हेडर चाहिए

• पेज को एक बड़ा, ध्यान खींचने वाला ओपनिंग सेक्शन लाभान्वित करता है

• आप बैकग्राउंड इमेजरी या ग्रेडिएंट एक्सेंट शामिल करना चाहते हैं 🚫 Hero का उपयोग तभी न करें:

• सरल पेज हेडर बना रहे हैं — इसके बजाय Page-Layout का उपयोग करें

• Hero महत्वपूर्ण सामग्री से प्रतिस्पर्धा करता है — पठनीयता को प्राथमिकता दें

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

• भाषाई संरचना के लिए सुनिश्चित करें कि शीर्षक <h1> टैग में हो
• यदि बैकग्राउंड छवियाँ उपयोग कर रहे हैं, तो पाठ के लिए पर्याप्त रंग विरोधाभास प्रदान करें
• ऐसे वीडियो या एनिमेशन पर ऑटोप्ले से बचें जो सामग्री से ध्यान भटका सकते हैं

उपयोग

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

स्लॉट्स

स्लॉट	विवरण
subtitle	Hero उपशीर्षक सामग्री
title	Hero शीर्षक सामग्री

पार्ट्स

भाग	विवरण
.instui-actions	वैकल्पिक क्रिया बटन या लिंक।
.instui-background	वैकल्पिक पृष्ठभूमि परत (छवि या ग्रेडिएंट)।
.instui-content	Hero पाठ और क्रियाओं के लिए कंटेनर।
.instui-overlay	पाठ विरोधाभास के लिए वैकल्पिक अर्ध-पारदर्शी ओवरले।
.instui-subtitle	वैकल्पिक सहायक पाठ या विवरण।
.instui-title	मुख्य Hero शीर्षक (आम तौर पर <h1>)।

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

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

स्टेट्स

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

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

Token	प्रकार	मान
--instui-color-primary-background	—	—
--instui-font-size-hero	<length>	—
--instui-font-size-large	<length>	—
--instui-font-weight-bold	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

संबंधित

• card