کامپوننت‌های محتوایی

<div ui="grid" style="--bana-grid-min:15rem">
  <article ui="card"><header><h3>محصول</h3><p>توضیح کوتاه</p></header><p>اطلاعات محصول در این بخش قرار می‌گیرد.</p><footer><button ui="primary">ذخیره</button><button ui="ghost">لغو</button></footer></article>
  <article ui="card interactive"><header><h4>کارت تعاملی</h4><p>با Hover بالا می‌آید</p></header><p>مناسب لینک به صفحه دیگر.</p></article>
  <article ui="card sunken flat"><header><h4>کارت تخت</h4></header><p>بدون سایه، با پس‌زمینه فرورفته.</p></article>
</div>

<div ui="cluster">
  <span ui="badge">پیش‌فرض</span><span ui="badge accent">برند</span><span ui="badge success dot">فعال</span>
  <span ui="badge warning dot">در انتظار</span><span ui="badge danger dot">رد شده</span><span ui="badge info">اطلاعات</span>
  <span ui="avatar">عم</span><span ui="avatar large">س</span>
  <span ui="avatar-group"><span ui="avatar small">ا</span><span ui="avatar small">ب</span><span ui="avatar small">ج</span></span>
</div>

<div ui="stack tight">
  <div ui="alert info" role="status"><bana-icon name="info"></bana-icon><div><strong>اطلاعات</strong>نسخه جدید در دسترس است.</div></div>
  <div ui="alert success" role="status"><bana-icon name="check"></bana-icon><div><strong>موفق</strong>تغییرات ذخیره شد.</div></div>
  <div ui="alert warning" role="alert"><bana-icon name="warning"></bana-icon><div><strong>هشدار</strong>اشتراک شما رو به پایان است.</div></div>
  <div ui="alert danger" role="alert"><bana-icon name="error"></bana-icon><div><strong>خطا</strong>اتصال به سرور برقرار نشد.</div></div>
</div>

<div ui="stack">
  <progress ui="progress" value="62" max="100" aria-label="پیشرفت بارگذاری">62%</progress>
  <progress ui="progress success large" value="100" max="100" aria-label="کامل">100%</progress>
  <div ui="cluster"><span ui="spinner small" role="status" aria-label="در حال بارگذاری"></span><span ui="spinner" role="status" aria-label="در حال بارگذاری"></span></div>
  <div ui="divider">یا</div>
</div>

<div aria-busy="true" ui="stack tight">
  <div ui="cluster"><span ui="skeleton circle" aria-hidden="true"></span><div style="flex:1" ui="stack tight"><span ui="skeleton text" aria-hidden="true" style="inline-size:50%"></span><span ui="skeleton text" aria-hidden="true"></span></div></div>
  <span ui="skeleton block" aria-hidden="true"></span>
</div>

<div ui="empty"><bana-icon name="search"></bana-icon><h4>نتیجه‌ای پیدا نشد</h4><p>عبارت دیگری را جست‌وجو کنید یا فیلترها را پاک کنید.</p><button ui="primary">پاک‌کردن فیلترها</button></div>

<div ui="table-wrap"><table ui="table hover">
  <caption>کاربران اخیر</caption>
  <thead><tr><th scope="col">نام</th><th scope="col">ایمیل</th><th scope="col">وضعیت</th><th scope="col" ui="end">امتیاز</th></tr></thead>
  <tbody>
    <tr><th scope="row">علی رضایی</th><td class="ltr">ali@example.com</td><td><span ui="badge success dot">فعال</span></td><td ui="end">۱٬۲۴۰</td></tr>
    <tr><th scope="row">مریم احمدی</th><td class="ltr">maryam@example.com</td><td><span ui="badge warning dot">در انتظار</span></td><td ui="end">۸۹۰</td></tr>
    <tr><th scope="row">سارا کریمی</th><td class="ltr">sara@example.com</td><td><span ui="badge danger dot">مسدود</span></td><td ui="end">۲۱۰</td></tr>
  </tbody>
</table></div>

<pre ui="code"><code>const total = items.reduce((a, b) =&gt; a + b.price, 0);</code></pre>