@use 'sprucecss/scss/spruce' as *;
.recent-orders {
background-color: color('surface');
border: config('border-width-base', $display) solid color('border');
border-radius: radius('lg');
padding: spacer('m');
@include layout-stack('m');
&__header {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: spacer('s');
justify-content: space-between;
}
&__heading {
@include layout-stack('xxs');
}
&__title {
font-size: font-size('h5');
}
&__text {
color: color('muted');
font-size: config('font-size-sm', $typography);
}
&__table {
font-size: config('font-size-sm', $typography);
th,
td {
vertical-align: middle;
white-space: nowrap;
}
tbody th {
font-weight: 700;
}
}
&__customer {
align-items: center;
display: flex;
gap: spacer('xs');
}
&__avatar {
block-size: 2rem;
border-radius: 50%;
inline-size: 2rem;
object-fit: cover;
}
&__who {
@include layout-stack(0);
}
&__name {
color: color('heading');
font-weight: 600;
}
&__email,
&__items {
color: color('muted');
font-size: 0.85em;
}
&__number {
font-variant-numeric: tabular-nums;
text-align: end;
}
&__items {
display: block;
}
}
<section class="recent-orders" aria-labelledby="recent-orders-title">
<header class="recent-orders__header">
<div class="recent-orders__heading">
<h2 class="recent-orders__title" id="recent-orders-title">Recent orders</h2>
<p class="recent-orders__text">The last orders from your store.</p>
</div>
<a class="btn btn--outline-primary btn--sm" href="#">View all orders</a>
</header>
<div class="table-responsive">
<table class="table recent-orders__table">
<caption class="sr-only">Recent orders</caption>
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Customer</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col" class="recent-orders__number">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="#">#10492</a></th>
<td>
<div class="recent-orders__customer">
<img class="recent-orders__avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="32" height="32" loading="lazy">
<div class="recent-orders__who">
<p class="recent-orders__name">Anna Smith</p>
<p class="recent-orders__email">anna@example.com</p>
</div>
</div>
</td>
<td><time datetime="2026-10-05T10:42">Oct 5, 10:42</time></td>
<td><span class="badge badge--success"><span class="badge__dot" aria-hidden="true"></span>Paid</span></td>
<td class="recent-orders__number">$219.00 <span class="recent-orders__items">3 items</span></td>
</tr>
<tr>
<th scope="row"><a href="#">#10491</a></th>
<td>
<div class="recent-orders__customer">
<img class="recent-orders__avatar" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="32" height="32" loading="lazy">
<div class="recent-orders__who">
<p class="recent-orders__name">Leo Novak</p>
<p class="recent-orders__email">leo@example.com</p>
</div>
</div>
</td>
<td><time datetime="2026-10-05T09:15">Oct 5, 09:15</time></td>
<td><span class="badge badge--warning"><span class="badge__dot" aria-hidden="true"></span>Pending</span></td>
<td class="recent-orders__number">$89.00 <span class="recent-orders__items">1 item</span></td>
</tr>
<tr>
<th scope="row"><a href="#">#10490</a></th>
<td>
<div class="recent-orders__customer">
<img class="recent-orders__avatar" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="32" height="32" loading="lazy">
<div class="recent-orders__who">
<p class="recent-orders__name">Sara Kim</p>
<p class="recent-orders__email">sara@example.com</p>
</div>
</div>
</td>
<td><time datetime="2026-10-04T18:03">Oct 4, 18:03</time></td>
<td><span class="badge badge--info"><span class="badge__dot" aria-hidden="true"></span>Shipped</span></td>
<td class="recent-orders__number">$341.00 <span class="recent-orders__items">2 items</span></td>
</tr>
<tr>
<th scope="row"><a href="#">#10489</a></th>
<td>
<div class="recent-orders__customer">
<img class="recent-orders__avatar" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="32" height="32" loading="lazy">
<div class="recent-orders__who">
<p class="recent-orders__name">Omar Haddad</p>
<p class="recent-orders__email">omar@example.com</p>
</div>
</div>
</td>
<td><time datetime="2026-10-04T14:27">Oct 4, 14:27</time></td>
<td><span class="badge badge--danger"><span class="badge__dot" aria-hidden="true"></span>Refunded</span></td>
<td class="recent-orders__number">$42.00 <span class="recent-orders__items">1 item</span></td>
</tr>
<tr>
<th scope="row"><a href="#">#10488</a></th>
<td>
<div class="recent-orders__customer">
<img class="recent-orders__avatar" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="32" height="32" loading="lazy">
<div class="recent-orders__who">
<p class="recent-orders__name">Hana Sato</p>
<p class="recent-orders__email">hana@example.com</p>
</div>
</div>
</td>
<td><time datetime="2026-10-04T11:50">Oct 4, 11:50</time></td>
<td><span class="badge badge--info"><span class="badge__dot" aria-hidden="true"></span>Shipped</span></td>
<td class="recent-orders__number">$508.00 <span class="recent-orders__items">4 items</span></td>
</tr>
</tbody>
</table>
</div>
</section>
