Notched boarding pass
Notched boarding pass: a CSS card. Copy the rules, or the prompt that rebuilds it.
Boarding 09:40
BER to LIS
Gate B12 · Seat 14A
14AWindow
CSS
.card-075-wrap {
display: inline-block;
filter: drop-shadow(0 8px 12px rgba(0,0,0,.1));
transition: filter .2s
}
.card-075-wrap:hover {
filter: drop-shadow(0 14px 17px rgba(0,0,0,.14))
}
.card-075 {
display: flex;
width: 360px;
background: #fff;
border-radius: 14px;
font-family: system-ui,sans-serif;
color: #111827;
-webkit-mask: radial-gradient(12px at 260px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(12px at 260px 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
mask: radial-gradient(12px at 260px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(12px at 260px 100%,transparent 98%,#000) bottom/100% 51% no-repeat
}
.card-075__main {
flex: 1;
padding: 20px 22px;
border-right: 2px dashed #d1d5db
}
.card-075__main span {
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: #6b7280
}
.card-075 h3 {
margin: 6px 0 4px;
font-size: 26px;
letter-spacing: -.02em
}
.card-075 p {
margin: 0;
font-size: 13px;
color: #4b5563
}
.card-075__stub {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f9fafb
}
.card-075 b {
font-size: 22px
}
.card-075 small {
font-size: 11px;
color: #6b7280
}
HTML
<div class="card-075-wrap">
<article class="card-075">
<div class="card-075__main"><span>Boarding 09:40</span><h3>BER to LIS</h3><p>Gate B12 · Seat 14A</p></div>
<div class="card-075__stub"><b>14A</b><small>Window</small></div>
</article>
</div>Prompt
Build a 360px boarding-pass style ticket: white, 14px radius, shadow 0 8px 24px rgba(0,0,0,.1). Two semicircular notches are punched into the top and bottom edges at x=260px using a two-layer radial-gradient CSS mask (12px radius, transparent center). A 2px dashed #d1d5db vertical line separates the main section (uppercase 11px gray "Boarding 09:40", 26px "BER to LIS", 13px gate and seat line) from a 100px stub on #f9fafb showing a 22px bold seat "14A" and an 11px "Window" caption. Shadow deepens on hover.