Stack
Overlapping cards or images with offset for layered visual effects. Supports fanning, directions, and hover spread.
Default
Top Card
This card is on top of the stack.
Middle Card
Offset behind the first.
Bottom Card
Furthest back in the stack.
<div class="sui-stack">
<div class="sui-card" style="width:220px;padding:16px;">
<h4>Top Card</h4>
<p>This card is on top of the stack.</p>
</div>
<div class="sui-card" style="width:220px;padding:16px;">
<h4>Middle Card</h4>
<p>Offset behind the first.</p>
</div>
<div class="sui-card" style="width:220px;padding:16px;">
<h4>Bottom Card</h4>
<p>Furthest back in the stack.</p>
</div>
</div>Fanned
Design
Create mockups
Develop
Write code
Deploy
Ship to prod
<div class="sui-stack sui-stack-fanned">
<div class="sui-card" style="width:200px;padding:16px;">
<h4>Design</h4>
<p>Create mockups</p>
</div>
<div class="sui-card" style="width:200px;padding:16px;">
<h4>Develop</h4>
<p>Write code</p>
</div>
<div class="sui-card" style="width:200px;padding:16px;">
<h4>Deploy</h4>
<p>Ship to prod</p>
</div>
</div>Images
Offset
' width='200' height='140'/%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='18' font-family='sans-serif' font-weight='700'%3E1%3C/text%3E%3C/svg%3E)
' width='200' height='140'/%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='18' font-family='sans-serif' font-weight='700'%3E2%3C/text%3E%3C/svg%3E)
' width='200' height='140'/%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='18' font-family='sans-serif' font-weight='700'%3E3%3C/text%3E%3C/svg%3E)
Fanned
<!-- Stacked images --> <div class="sui-stack"> <img src="image1.jpg" alt="Image 1" style="width:160px;border-radius:8px;"> <img src="image2.jpg" alt="Image 2" style="width:160px;border-radius:8px;"> <img src="image3.jpg" alt="Image 3" style="width:160px;border-radius:8px;"> </div> <!-- Fanned images --> <div class="sui-stack sui-stack-fanned"> <img src="image1.jpg" alt="Image 1" style="width:160px;border-radius:8px;"> <img src="image2.jpg" alt="Image 2" style="width:160px;border-radius:8px;"> <img src="image3.jpg" alt="Image 3" style="width:160px;border-radius:8px;"> </div>
Hover Spread
Extra Small
Inbox
3 new messages
Updates
2 notifications
Archive
12 items
Small
Inbox
3 new messages
Updates
2 notifications
Archive
12 items
Medium (default)
Inbox
3 new messages
Updates
2 notifications
Archive
12 items
Large
Inbox
3 new messages
Updates
2 notifications
Archive
12 items
Full
Inbox
3 new messages
Updates
2 notifications
Archive
12 items
<!-- Extra small spread --> <div class="sui-stack sui-stack-hover sui-stack-spread-xs"> <div class="sui-card">...</div> <div class="sui-card">...</div> <div class="sui-card">...</div> </div> <!-- Small spread --> <div class="sui-stack sui-stack-hover sui-stack-spread-sm"> <div class="sui-card">...</div> <div class="sui-card">...</div> <div class="sui-card">...</div> </div> <!-- Medium (default) --> <div class="sui-stack sui-stack-hover sui-stack-spread-md"> <div class="sui-card">...</div> <div class="sui-card">...</div> <div class="sui-card">...</div> </div> <!-- Large --> <div class="sui-stack sui-stack-hover sui-stack-spread-lg"> <div class="sui-card">...</div> <div class="sui-card">...</div> <div class="sui-card">...</div> </div> <!-- Full — all cards fully separate --> <div class="sui-stack sui-stack-hover sui-stack-spread-full"> <div class="sui-card">...</div> <div class="sui-card">...</div> <div class="sui-card">...</div> </div> <!-- Custom gap for larger cards (default 180px) --> <div class="sui-stack sui-stack-hover sui-stack-spread-full" style="--sui-stack-gap: 320px;"> <div class="sui-card" style="width:300px;">...</div> <div class="sui-card" style="width:300px;">...</div> <div class="sui-card" style="width:300px;">...</div> </div>