Cards & widgets

<div class="stack">
<div>
<div class="flex between small mb-sm">
<span>Web design</span>
<strong>32%</strong>
</div>
<div class="library-progress" role="progressbar" aria-label="Web design" 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>Product design</span>
<strong>64%</strong>
</div>
<div class="library-progress" role="progressbar" aria-label="Product design" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
<span style="width:64%;--progress-color:var(--navy)">
</span>
</div>
</div>
<div>
<div class="flex between small mb-sm">
<span>Branding</span>
<strong>88%</strong>
</div>
<div class="library-progress" role="progressbar" aria-label="Branding" 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">AM</span>
<span class="avatar tone-1 " aria-hidden="true">SW</span>
<span class="avatar tone-2 avatar-sm" aria-hidden="true">OH</span>
</div>
<div class="avatar-group">
<span class="avatar tone-0 " aria-hidden="true">AM</span>
<span class="avatar tone-1 " aria-hidden="true">SW</span>
<span class="avatar tone-2 " aria-hidden="true">OH</span>
<span class="avatar tone-3 " aria-hidden="true">LD</span>
<span class="avatar tone-4 " aria-hidden="true">AC</span>
</div>
<p class="muted small section-copy">Team · 5</p>

<button class="btn btn-secondary mb" data-skeleton-toggle aria-pressed="false">Skeleton preview</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>Nothing here just yet</h3>
<p class="muted small">Try a different search or add your first item.</p>
</div>
<div data-skeleton-preview class="skeleton-preview" hidden aria-label="Skeleton preview">
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</div>