Phone Mockup
Container styled like a smartphone with notch, dynamic island, status bar, and home indicator. For app showcases and demos.
Notch
9:41
●●●
Welcome
This is a phone mockup with a notch.
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-notch">
<div class="sui-phone-status">
<span>9:41</span>
<span>●●●</span>
</div>
<div style="padding:60px 20px 20px;">
<h3>Welcome</h3>
<p>Your app content here.</p>
</div>
<div class="sui-phone-home"></div>
</div>
</div>Dynamic Island
9:41
●●●
Dynamic Island
Modern pill-shaped cutout.
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-island">
<div class="sui-phone-status">
<span>9:41</span>
<span>●●●</span>
</div>
<div style="padding:60px 20px 20px;">
<!-- Your content here -->
</div>
<div class="sui-phone-home"></div>
</div>
</div>Teardrop
9:41
●●●
Teardrop
Small water-drop cutout.
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-teardrop">
<div class="sui-phone-status">
<span>9:41</span>
<span>●●●</span>
</div>
<div style="padding:50px 16px 16px;">
<!-- Your content here -->
</div>
<div class="sui-phone-home"></div>
</div>
</div>Punch Hole
Single
9:41
●●●
Single punch hole
Double
9:41
●●●
Double punch hole
<!-- Single punch hole -->
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-punch">
<!-- content -->
</div>
</div>
<!-- Double punch hole -->
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-punch-double">
<!-- content -->
</div>
</div>With Content
' width='260' height='520'/%3E%3Ctext x='50%25' y='46%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='22' font-family='sans-serif' font-weight='800'%3ESoftUI%3C/text%3E%3Ctext x='50%25' y='54%25' dominant-baseline='middle' text-anchor='middle' fill='rgba(255,255,255,0.7)' font-size='12' font-family='sans-serif' font-weight='500'%3EMobile App%3C/text%3E%3C/svg%3E)
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-island">
<img src="app-screenshot.png" alt="App Screenshot">
<div class="sui-phone-home"></div>
</div>
</div>Colors
Space Black
Default
Silver
White
Gold
Gold
<!-- Space Black (default) --> <div class="sui-phone"> <div class="sui-phone-screen sui-phone-island">...</div> </div> <!-- Silver --> <div class="sui-phone sui-phone-white"> <div class="sui-phone-screen sui-phone-island">...</div> </div> <!-- Gold --> <div class="sui-phone sui-phone-gold"> <div class="sui-phone-screen sui-phone-island">...</div> </div>
Small
Small
Default
<!-- Small -->
<div class="sui-phone sui-phone-sm">
<div class="sui-phone-screen sui-phone-island">
<img src="screenshot.png" alt="App">
<div class="sui-phone-home"></div>
</div>
</div>
<!-- Default -->
<div class="sui-phone">
<div class="sui-phone-screen sui-phone-island">
<img src="screenshot.png" alt="App">
<div class="sui-phone-home"></div>
</div>
</div>