البطاقات والعناصر

<div class="stack">
<div>
<div class="flex between small mb-sm">
<span>تصميم مواقع</span>
<strong>32%</strong>
</div>
<div class="library-progress" role="progressbar" aria-label="تصميم مواقع" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
<span style="width:32%;--progress-color:var(--brand)">
</span>
</div>
</div>
<div>
<div class="flex between small mb-sm">
<span>تصميم منتجات</span>
<strong>64%</strong>
</div>
<div class="library-progress" role="progressbar" aria-label="تصميم منتجات" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
<span style="width:64%;--progress-color:var(--teal)">
</span>
</div>
</div>
<div>
<div class="flex between small mb-sm">
<span>هوية بصرية</span>
<strong>88%</strong>
</div>
<div class="library-progress" role="progressbar" aria-label="هوية بصرية" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100">
<span style="width:88%;--progress-color:var(--blue)">
</span>
</div>
</div>
</div>

<div class="flex wrap mb">
<span class="avatar tone-0 avatar-lg" aria-hidden="true">أم</span>
<span class="avatar tone-1 " aria-hidden="true">سخ</span>
<span class="avatar tone-2 avatar-sm" aria-hidden="true">عح</span>
</div>
<div class="avatar-group">
<span class="avatar tone-0 " aria-hidden="true">أم</span>
<span class="avatar tone-1 " aria-hidden="true">سخ</span>
<span class="avatar tone-2 " aria-hidden="true">عح</span>
<span class="avatar tone-3 " aria-hidden="true">لإ</span>
<span class="avatar tone-4 " aria-hidden="true">آن</span>
</div>
<p class="muted small section-copy">الفريق · 5</p>

<button class="btn btn-secondary mb" data-skeleton-toggle aria-pressed="false">معاينة التحميل الهيكلي</button>
<div data-skeleton-content class="widget-placeholder">
<span class="icon-tile tone-1">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 8V6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/>
</svg>
</span>
<h3>لا يوجد شيء هنا بعد</h3>
<p class="muted small">جرّب بحثًا مختلفًا أو أضف العنصر الأول.</p>
</div>
<div data-skeleton-preview class="skeleton-preview" hidden aria-label="معاينة التحميل الهيكلي">
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</div>