Card with embedded mini app preview

A small mocked product screenshot (chat bubble, notification, or status row) sits inside a card above the real heading and description. Use this to make an abstract feature feel concrete without a real screenshot; swap the mock content per feature.

pattern · vercel.com card compositevanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="v-mini-card">
  <div class="v-mini-window">
    <div class="v-mini-msg">
      <span class="v-mini-dot"></span>
      <div><strong>Team channel</strong><p>Your workspace update is ready to review.</p></div>
    </div>
  </div>
  <h4>Chat with your workspace</h4>
  <p>An assistant that reads from your workspace and answers in context.</p>
</div>

Block id: vercel-mini-app-preview-cardvanilla · swap-content

More card blocks

Split hero with booking-card mockup

cal.com

Floating booking-confirmation mockup card

cal.com

Issue tracker card with live activity feed

linear

Rotating project health status list

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call