Airport Departures Board
A Solari-flap inspired departures board — amber-on-charcoal monospace rows for six flights. Hover any row to reveal the flight detail card: airline, route with duration, aircraft, seats, class, plus a status pill that pulses when a flight is boarding. For travel apps, status pages, and ops dashboards.
Airport Departures Board the 13th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="depart-stage">
<div class="depart-board">
<div class="depart-headrow">
<span>Time</span><span>Flight</span><span>Destination</span><span>Term</span><span>Gate</span><span>Status</span>
</div>
<div class="depart-row">
<span class="depart-time">06:15</span>
<span class="depart-num">AA 2847</span>
<span class="depart-dest">New York <small>JFK</small></span>
<span class="depart-term">T3</span>
<span class="depart-gate">B12</span>
<span class="depart-status depart-departed">Departed</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">American Airlines</div><div class="depart-flightnum">AA 2847</div></div>
<span class="depart-badge depart-badge-departed">Departed</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">5h 22m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">JFK</div><div class="depart-city">New York</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">B737-800</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">162</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">F / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">Yes</div></div>
</div>
<div class="depart-foot"><span>Departed 06:09 · 6 min early</span><span>T3 · Gate B12</span></div>
</div>
</div>
<div class="depart-row">
<span class="depart-time">07:40</span>
<span class="depart-num">UA 5512</span>
<span class="depart-dest">Chicago <small>ORD</small></span>
<span class="depart-term">T7</span>
<span class="depart-gate">C04</span>
<span class="depart-status depart-ontime">On Time</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">United Airlines</div><div class="depart-flightnum">UA 5512</div></div>
<span class="depart-badge depart-badge-ontime">On Time</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">3h 55m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">ORD</div><div class="depart-city">Chicago</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">A320neo</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">150</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">J / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Wi-Fi</div><div class="depart-cell-val">Yes</div></div>
</div>
<div class="depart-foot"><span>Boards 07:10 · Gate closes 07:25</span><span>T7 · Gate C04</span></div>
</div>
</div>
<div class="depart-row">
<span class="depart-time">08:20</span>
<span class="depart-num">DL 8831</span>
<span class="depart-dest">London <small>LHR</small></span>
<span class="depart-term">TB</span>
<span class="depart-gate">A22</span>
<span class="depart-status depart-boarding">Boarding</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">Delta Air Lines</div><div class="depart-flightnum">DL 8831</div></div>
<span class="depart-badge depart-badge-boarding">Boarding</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">10h 15m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">LHR</div><div class="depart-city">London</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">B767-400</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">245</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">F / J / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">Yes</div></div>
</div>
<div class="depart-foot"><span>Now boarding all groups · Final call</span><span>TB · Gate A22</span></div>
</div>
</div>
<div class="depart-row">
<span class="depart-time">10:30</span>
<span class="depart-num">SQ 7736</span>
<span class="depart-dest">Singapore <small>SIN</small></span>
<span class="depart-term">TB</span>
<span class="depart-gate">B44</span>
<span class="depart-status depart-delayed">Delayed 45m</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">Singapore Airlines</div><div class="depart-flightnum">SQ 7736</div></div>
<span class="depart-badge depart-badge-delayed">Delayed 45m</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">17h 30m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">SIN</div><div class="depart-city">Singapore</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">A350-900ULR</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">161</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">J / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">2× hot</div></div>
</div>
<div class="depart-foot"><span>Late inbound aircraft · New ETD 11:15</span><span>TB · Gate B44</span></div>
</div>
</div>
</div>
</div> .depart-stage {
background: #111111;
/* Bottom room — flight detail cards drop down from each row, ~280px
tall. The board sits high so the tooltips render inside the card. */
padding: 36px 28px 320px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.depart-board {
max-width: 720px;
margin: 0 auto;
background: #181818;
border: 1px solid #2a2a2a;
border-radius: 4px;
}
.depart-headrow {
display: grid;
grid-template-columns: 60px 90px 1fr 50px 50px 90px;
padding: 10px 18px;
border-bottom: 1px solid #222;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #3a3a3a;
gap: 12px;
}
.depart-row {
display: grid;
grid-template-columns: 60px 90px 1fr 50px 50px 90px;
align-items: center;
padding: 13px 18px;
border-bottom: 1px solid #1d1d1d;
gap: 12px;
cursor: help;
position: relative;
transition: background 0.12s;
}
.depart-row:last-child { border-bottom: none; }
.depart-row:hover { background: rgba(255, 255, 255, 0.025); }
.depart-time {
font-size: 16px;
font-weight: 500;
color: #e8a020;
letter-spacing: 0.06em;
}
.depart-num { font-size: 12px; color: #8a8a8a; }
.depart-dest { font-size: 13px; color: #e0e0e0; letter-spacing: 0.02em; }
.depart-dest small { font-size: 10px; color: #444; margin-left: 6px; }
.depart-term { font-size: 12px; color: #6a6a6a; }
.depart-gate { font-size: 13px; font-weight: 500; color: #c08010; }
.depart-status { font-size: 10px; font-weight: 500; letter-spacing: 0.05em; }
.depart-ontime { color: #30b860; }
.depart-boarding { color: #e8a020; animation: depart-blink 1.2s ease-in-out infinite; }
.depart-delayed { color: #e05030; }
.depart-departed { color: #404040; }
@keyframes depart-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.depart-tip {
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%) translateY(6px);
z-index: 100;
width: 360px;
background: #1c1c1c;
border: 1px solid #2e2e2e;
border-radius: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
overflow: hidden;
}
.depart-row:hover .depart-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.depart-tip-head {
background: #222;
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #2a2a2a;
}
.depart-airline { font-size: 10px; color: #5a5a5a; letter-spacing: 0.08em; }
.depart-flightnum {
font-size: 18px;
font-weight: 500;
color: #e8a020;
margin-top: 2px;
}
.depart-badge {
font-size: 9.5px;
padding: 3px 9px;
border-radius: 3px;
letter-spacing: 0.08em;
font-weight: 500;
}
.depart-badge-ontime { background: rgba(48, 184, 96, 0.12); color: #30b860; border: 1px solid rgba(48, 184, 96, 0.2); }
.depart-badge-boarding { background: rgba(232, 160, 32, 0.12); color: #e8a020; border: 1px solid rgba(232, 160, 32, 0.2); }
.depart-badge-delayed { background: rgba(224, 80, 48, 0.12); color: #e05030; border: 1px solid rgba(224, 80, 48, 0.2); }
.depart-badge-departed { background: rgba(80, 80, 80, 0.1); color: #505050; border: 1px solid #282828; }
.depart-route {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #242424;
}
.depart-airport { text-align: center; }
.depart-code { font-size: 20px; font-weight: 500; color: #c0c0c0; letter-spacing: 0.04em; }
.depart-city { font-size: 8.5px; color: #444; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.depart-arrow {
flex: 1;
display: flex;
align-items: center;
position: relative;
}
.depart-arrow-line {
height: 1px;
flex: 1;
background: linear-gradient(to right, #2a2a2a, #3a3a3a, #2a2a2a);
position: relative;
}
.depart-duration {
font-size: 8.5px;
color: #404040;
text-align: center;
position: absolute;
top: -13px;
width: 100%;
letter-spacing: 0.08em;
}
.depart-plane { font-size: 13px; color: #505050; flex-shrink: 0; }
.depart-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid #242424;
}
.depart-cell {
padding: 9px 14px;
border-right: 1px solid #242424;
}
.depart-cell:last-child { border-right: none; }
.depart-cell-label {
font-size: 7.5px;
color: #383838;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.depart-cell-val { font-size: 11.5px; color: #808080; }
.depart-foot {
padding: 9px 16px;
font-size: 8.5px;
color: #303030;
display: flex;
justify-content: space-between;
letter-spacing: 0.06em;
}