Flights – UI Card

jitesh208
Jan 17, 2026 2
Live Preview

Live Editor

<div class="flight-modern">
  <div class="top">
    <span>My flight</span>
    <span class="close">✕</span>
  </div>

  <div class="route">
    <div>
      <strong>LIS</strong>
      <span>9:45 AM</span>
    </div>

    <div class="path">
      <span></span>
      ✈
      <span></span>
    </div>

    <div>
      <strong>MAD</strong>
      <span>12:00 PM</span>
    </div>
  </div>

  <div class="meta">
    <span class="pill red">Boarding · Gate 17</span>
    <span class="pill green">On time</span>
  </div>

  <div class="qr"></div>

  <div class="details">
    <span>Terminal 1</span>
    <span>Seat 12A</span>
  </div>
</div>
*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#f4f5f7;
  font-family:system-ui, -apple-system;
}

/* Card */
.flight-modern{
  width:100%;
  max-width:250px;
  background:#ffffff;
  border-radius:22px;
  padding:16px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.12);
  animation:float 4s ease-in-out infinite;
}

/* Header */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  font-size:14px;
}
.close{opacity:.4}

/* Route */
.route{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:20px 0;
  text-align:center;
}

.route strong{
  font-size:16px;
}
.route span{
  font-size:12px;
  color:#777;
}

/* Path */
.path{
  display:flex;
  align-items:center;
  gap:6px;
  color:#999;
}
.path span{
  width:18px;
  height:2px;
  background:#ddd;
  border-radius:2px;
}

/* Meta pills */
.meta{
  display:flex;
  gap:8px;
  margin-bottom:16px;
  justify-content:center;
}

.pill{
  font-size:11px;
  padding:6px 10px;
  border-radius:14px;
}
.red{
  background:#ffecec;
  color:#b42318;
}
.green{
  background:#e9f9ef;
  color:#067647;
}

/* QR */
.qr{
  width:100%;
  height:100px;
  border-radius:16px;
  background:
    repeating-linear-gradient(
      45deg,
      #111 0 4px,
      transparent 4px 8px
    );
  opacity:.85;
  margin-bottom:14px;
}

/* Details */
.details{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#666;
}

/* Motion */
@keyframes float{
  50%{transform:translateY(-3px)}
}
Categories

Flights – UI Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
