UI প্রিমিটিভ

<div rst-box-head>
  <h2>পেআউট</h2>
  <a rst-btn href="/payout/edit">সম্পাদনা</a>
</div>
<section rst-box>
  <p>স্ক্রিনের সবকিছু বাক্সের ভিতরে থাকে।</p>
  <div rst-box-foot>2 ঘণ্টা আগে হালনাগাদ</div>
</section>

<p>
  <button rst-btn type="button">বাতিল</button> <button rst-btn="primary" type="button">সংরক্ষণ করুন</button> <button rst-btn="ghost" type="button">প্রিভিউ</button> <button rst-btn="danger" type="button">মুছুন</button>
</p>
<p>
  <button rst-btn="primary sm" type="button">ছোট</button> <button rst-btn="primary" type="button">সাধারণ</button> <button rst-btn="primary lg" type="button">বড়</button> <a rst-btn href="/orders">অর্ডার দেখুন</a>
</p>
<p>
  <button rst-btn="primary block" type="button">চালিয়ে যান</button>
</p>
<p>
  <button rst-btn type="button" disabled>আর্কাইভ করা</button>
</p>

<details rst-dropdown name="rst-menus">
  <summary>
    ফিল্টার
    <span rst-caret 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="m6 9 6 6 6-6"/></svg>
    </span>
    <span class="rst-sr-only">অর্ডার ছাঁকুন: পরিশোধিত</span>
  </summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">পরিশোধিত</a>
    <details rst-menu-group name="rst-menus-price" open>
      <summary>দাম</summary>
      <div>
        <a href="/orders?price=free">বিনামূল্যে</a>
      </div>
    </details>
  </div>
</details>
<span rst-ftok>
  <span rst-ftok-k>পরিশোধিত</span>
  <a href="/orders" aria-label="ছাঁকনি সরান: পরিশোধিত">✕</a>
</span>

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">নাম</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">ইমেল</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">শহর</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">পিন</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>পরিবর্তন সঙ্গে সঙ্গে সংরক্ষিত হয়।</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">বাতিল</a>
      <button rst-btn="primary" type="submit">সংরক্ষণ করুন</button>
    </div>
  </div>
</form>

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="সহায়তা: অর্ডার" data-tip="অর্ডার সম্পর্কে">
  <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.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
</a>

<div rst-card style="--rst-cols: 2fr 110px var(--rst-col-menu)">
  <div rst-lrow="head">
    <span>অর্ডার</span>
    <span class="rst-m-hide">অবস্থা</span>
    <span></span>
  </div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi>
      <small>AB3PX · <bdi>grace@example.com</bdi></small>
    </a>
    <span class="rst-m-hide rst-cell-mut">পরিশোধিত</span>
    <details rst-row-menu name="rst-menus">
      <summary aria-label="Grace Hopper-এর জন্য পদক্ষেপ">
        <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
      </summary>
      <div rst-row-menu-panel>
        <a href="/orders/AB3PX">দেখুন</a>
        <hr>
        <a class="rst-danger" href="/orders/AB3PX/refund">অর্ডারের টাকা ফেরত দিন…</a>
      </div>
    </details>
  </div>
  <p rst-no-match>কোনো অর্ডার মেলেনি। <a href="/orders">ছাঁকনি মুছুন</a></p>
</div>
<p rst-count-line>
  <strong>412</strong>টির মধ্যে <strong>1–20</strong> দেখানো হচ্ছে</p>

<label rst-selbox>
  <input type="checkbox" aria-label="অর্ডার AB3PX নির্বাচন করুন">
</label>

<div rst-stats>
  <div rst-stat="lead">
    <span rst-stat-label>এই মাসের আয়</span>
    <span rst-stat-num>&euro;48,210</span>
    <span rst-stat-delta rst-tone="positive">+12%</span>
    <span rst-stat-note>গত মাসের তুলনায়</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>আজকের অর্ডার</span>
    <span rst-stat-num>318</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>গড় অর্ডার মূল্য</span>
    <span rst-stat-num>&euro;41.20</span>
    <span rst-stat-delta rst-tone="negative">&minus;3%</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>ফেরত</span>
    <span rst-stat-num>7</span>
  </div>
</div>

<div rst-tblock>
  <label rst-tblock-head>
    <input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span>
      <span rst-tblock-title>ইমেল বিজ্ঞপ্তি</span>
      <span rst-tblock-desc>আপনি যে থ্রেডে আছেন তার প্রতিটি উত্তরে পাঠানো হয়।</span>
    </span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">কত ঘনঘন</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="দৈনিক সারসংক্ষেপ">
    </div>
  </div>
</div>