डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: signal। भाषा: हिन्दी।
वे छोटे शब्दावली टुकड़े जिनसे स्क्रीन जुड़ती है: स्थिति, पहचान, प्रगति, और चेतावनी का इकलौता रूप।
पहले से बने, आपस में एक जैसे UI तत्व, जो सर्वर पर रेंडर होते हैं।
फ़्रेमवर्क की अपनी शब्दावली इन्हें partial कहती है: ui.Templates() partial लौटाता है, और docs/site/templates.md उन्हें उसी नाम से दर्ज करता है। इस पेज का शब्द बदला है; कोड का नहीं।
लिंक निष्क्रिय, नमूने का स्रोत साथ में दिया गया है।
नीचे का हर नमूना अपने ही फ़्रेम में है।
नमूना सामग्री अंग्रेज़ी में। नमूना शेल अनूदित हैं।
रिकॉर्ड की स्थिति एक रंगीन पिल के रूप में, रंग और लेबल दोनों के साथ।
डिफ़ॉल्ट टोन (neutral)
<span rst-status rst-tone="neutral">Draft</span>neutral
<span rst-status rst-tone="neutral">Draft</span>positive
<span rst-status rst-tone="positive">Published</span>warning
<span rst-status rst-tone="warning">Scheduled</span>negative
<span rst-status rst-tone="negative">Failed</span>बड़े अक्षरों वाला किनारेदार छोटा चिप, स्थिर निशानों के लिए। यह status-pill से अलग है, जो रिकॉर्ड की स्थिति बताता है।
कोई टोन नहीं (शांत डिफ़ॉल्ट)
<span rst-badge>Draft</span>neutral
<span rst-badge="neutral">Internal</span>positive
<span rst-badge="positive">Live</span>warning
<span rst-badge="warning">Beta</span>negative
<span rst-badge="negative">Sold out</span>क्षमता बार, अपने आँकड़े के साथ।
ख़ाली
<span rst-meter><meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>0/500</span></span>कुछ हद तक भरा
<span rst-meter><meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>210/500</span></span>लगभग भरा हुआ
<span rst-meter><meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>412/500</span></span>भरा हुआ
<span rst-meter><meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>500/500</span></span>तय सीमा से ऊपर
<span rst-meter><meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter><span rst-meter-num>700/500</span></span>पार्शियल में भराव 100% पर सीमित रहता है।
डैशबोर्ड पर एक संख्या, उसके लेबल और उसमें कितना बदलाव हुआ, के साथ।
बड़ी संख्या
<div rst-stats><div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div></div>पंक्ति के किसी एक आँकड़े में Lead जोड़ें, वह बड़ा हो जाएगा। यह वही कॉम्पोनेंट है, बस बड़ा।
छोटी संख्या
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>आपको बस एक लेबल और एक संख्या चाहिए। बाकी सब वैकल्पिक है।
जब घटना अच्छा हो
<div rst-stats><div rst-stat><span rst-stat-label>Time to first reply</span><span rst-stat-num>1h 12m</span><span rst-stat-delta rst-tone="positive">−38%</span><span rst-stat-note>vs. last week</span></div></div>रंग आप तय करते हैं, कॉम्पोनेंट नहीं। यहाँ संख्या घटी है और यह अच्छी खबर है, इसलिए बदलाव हरा है।
जब बढ़ना बुरा हो
<div rst-stats><div rst-stat><span rst-stat-label>Failed payments</span><span rst-stat-num>9</span><span rst-stat-delta rst-tone="negative">+3</span><span rst-stat-note>vs. last week</span></div></div>यहाँ संख्या बढ़ी है और यह बुरी खबर है, इसलिए बदलाव लाल है।
जब कहा न जा सके
<div rst-stats><div rst-stat><span rst-stat-label>Average session length</span><span rst-stat-num>4m 12s</span><span rst-stat-delta rst-tone="neutral">+18s</span><span rst-stat-note>since Friday</span></div></div>रंग न दें तो बदलाव धूसर रहेगा। जब कह न सकें कि यह अच्छा है या बुरा, तब ऐसा करें।
छोटा करके लिखी संख्या
<div rst-stats><div rst-stat><span rst-stat-label>Messages sent</span><span rst-stat-num><data value="4120">4.1k</data></span></div></div>4120 की जगह 4.1k दिखा रहे हैं? पूरी संख्या Exact में रखें। स्क्रीन रीडर वही पढ़ते हैं जो स्क्रीन पर है, इसलिए जो कुछ व्यक्ति को चाहिए वह संख्या में ही रखें।
आद्याक्षर अवतार, नाम और ईमेल। लोगों के रिकॉर्ड जल्दी पहचानने के लिए।
नाम और ईमेल
<a rst-person href="/people/1"><span rst-person-av aria-hidden="true">G</span><span rst-person-meta><span rst-person-name>Grace Hopper</span><span rst-person-email>grace@example.com</span></span></a>बड़ा, दिखाने वाली स्क्रीन के शीर्ष का आकार
<a rst-person="lg" href="/people/2"><span rst-person-av aria-hidden="true">A</span><span rst-person-meta><span rst-person-name>Ada Lovelace</span><span rst-person-email>ada@example.com</span></span></a>बिना आद्याक्षर
<a rst-person href="/people/3"><span rst-person-av="empty" aria-hidden="true"></span><span rst-person-meta><span rst-person-name>Unclaimed invitation</span><span rst-person-email>invited@example.com</span></span></a>चेतावनी की इकलौती शब्दावली: रंगी हुई पट्टी, टोन का चिह्न, वैकल्पिक मोटा शीर्षक, और एक अनुच्छेद।
डिफ़ॉल्ट टोन (info), बिना शीर्षक
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><p>Posts are visible to members only until the site is published.</p></div></div>info
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><p>Posts are visible to members only until the site is published.</p></div></div>positive
<div rst-callout rst-tone="positive"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span><div rst-callout-body><strong>Payments are connected</strong><p>You can take payment for tickets now.</p></div></div>warning
<div rst-callout rst-tone="warning"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span><div rst-callout-body><strong>Connect payments to start selling</strong><p>Your event is live but cannot take payment yet.</p></div></div>negative
<div rst-callout rst-tone="negative"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></span><div rst-callout-body><strong>The last import failed</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>negative, चेतावनी के रूप में घोषित
<div rst-callout rst-tone="negative" role="alert"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg></span><div rst-callout-body><strong>The import stopped</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>alert, role="alert" जोड़ता है ताकि ज़रूरी संदेश दिखाए जा सकें।
विवरण स्क्रीन पर किसी रिकॉर्ड की डेफ़िनिशन लिस्ट। मोनो चिह्न मशीन जैसे मानों के लिए।
चार तथ्य, एक मशीन जैसा
<section rst-box><dl rst-detail>
<dt>Audience</dt>
<dd>Members</dd>
<dt>Main page</dt>
<dd>No</dd>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
</dl></section>रीडायरेक्ट के बाद एक पंक्ति की पुष्टि। यह dict नहीं, सादा स्ट्रिंग लेती है, और ख़ाली होने पर कुछ नहीं दिखाती।
सहेजे जाने का संदेश
<p rst-notice role="status">Post saved.</p>फ़ॉर्म की त्रुटि सारांश पंक्ति, role="alert"। यह सादा स्ट्रिंग लेती है; त्रुटि न हो तो कुछ नहीं दिखाती।
अस्वीकृत सबमिशन
<p rst-form-error role="alert">That title is already taken.</p>पृष्ठभूमि के काम का पोल किया जाने वाला हिस्सा। data-poll विशेषता तभी निकलती है जब काम चल रहा हो — उसे न देना ही पोलिंग रोकने का तरीका है।
चल रहा है
<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
<span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…
<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>
यह वाला पोल करता है: यह पृष्ठ का इकलौता नमूना है जो नेटवर्क से कुछ माँगता है, और स्थिर साइट पर उसका उत्तर कभी नहीं आता।
पूरा हुआ
<div rst-job>
<strong>Import</strong> finished.
</div>
विफल
<div rst-job>
<strong>Import</strong> failed: row 91: no such column "published"
</div>