چیدمان

<div ui="stack">
  <div ui="cluster"><span ui="badge accent">برچسب ۱</span><span ui="badge">برچسب ۲</span><span ui="badge success">برچسب ۳</span></div>
  <div ui="cluster between"><strong>عنوان</strong><button ui="primary small">اقدام</button></div>
</div>

<section ui="grid" style="--bana-grid-min: 12rem">
  <div class="scale-box">۱</div><div class="scale-box">۲</div><div class="scale-box">۳</div><div class="scale-box">۴</div>
</section>

<div ui="sidebar-layout">
  <aside ui="card flat sunken"><strong>کناره</strong><p>در عرض کم زیر محتوا می‌رود.</p></aside>
  <main ui="card"><h3>محتوا</h3><p>ستون اصلی هر فضای باقی‌مانده را می‌گیرد.</p></main>
</div>

<article ui="prose">
  <h3>عنوان مقاله</h3>
  <p>متن بلند با طول خط خوانا (۷۰ نویسه)، فاصله‌گذاری عمودی منظم و لینک‌های <a href="#prose">مشخص</a>.</p>
  <ul><li>مورد اول</li><li>مورد دوم</li></ul>
  <blockquote>نقل‌قول با نوار تأکید در سمت شروع.</blockquote>
</article>