webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Boarding Pass Card — Free HTML CSS Snippet

Boarding Pass · Cards · Plain HTML & CSS · Live preview

CategoryCards
TagsSVGCSS OnlyCSS Grid

Copy & paste

Source Code

<div class="wrap">
  <div class="pass">
    <div class="pass-main">
      <div class="airline">
        <div class="logo">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5L21 16z"/></svg>
        </div>
        <span class="airline-name">Skyward Air</span>
        <span class="flight-class">Business</span>
      </div>
      <div class="route">
        <div class="endpoint">
          <span class="code">SFO</span>
          <span class="city">San Francisco</span>
          <span class="time">08:45</span>
        </div>
        <div class="path">
          <div class="path-line">
            <span class="dot"></span>
            <svg class="plane" width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M22 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L14 19v-5.5L22 16z"/></svg>
            <span class="dot"></span>
          </div>
          <span class="duration">5h 30m &middot; Nonstop</span>
        </div>
        <div class="endpoint end">
          <span class="code">JFK</span>
          <span class="city">New York</span>
          <span class="time">17:15</span>
        </div>
      </div>
      <div class="details">
        <div class="detail"><span class="d-label">Passenger</span><span class="d-val">A. MORGAN</span></div>
        <div class="detail"><span class="d-label">Flight</span><span class="d-val">SK 482</span></div>
        <div class="detail"><span class="d-label">Date</span><span class="d-val">14 JUN</span></div>
        <div class="detail"><span class="d-label">Gate</span><span class="d-val hl">B12</span></div>
      </div>
    </div>
    <div class="pass-stub">
      <div class="perforation"></div>
      <div class="stub-content">
        <div class="stub-row"><span class="d-label">Seat</span><span class="d-val big">4A</span></div>
        <div class="stub-row"><span class="d-label">Boarding</span><span class="d-val">08:15</span></div>
        <div class="stub-row"><span class="d-label">Group</span><span class="d-val">1</span></div>
        <div class="barcode">
          <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
        <span class="ticket-no">SK482 &middot; ETKT 0142847290</span>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Two-part ticket: white main section plus coloured tear-off stub
Perforated seam with repeating-gradient dashes and circular notches
Flight route with dashed path line, plane icon, and endpoint dots
Oversized three-letter airport codes for clear visual anchoring
Pure-CSS barcode using nth-child flex-width variation
Highlighted gate number and oversized seat for scannable hierarchy
Responsive: stacks vertically with a horizontal tear line on mobile
Zero JavaScript and no images — entirely HTML and CSS

About this UI Snippet

Boarding Pass — Flight Route, Perforated Tear-Off Stub & CSS Barcode

Screenshot of the Boarding Pass snippet rendered live

A boarding pass card is a high-craft UI piece that appears in travel apps, flight booking confirmations, event tickets, and design portfolios. This snippet recreates a realistic airline boarding pass entirely in HTML and CSS: an airline header, a departure-to-arrival route with an animated flight path, passenger and flight details, and a colour-contrasting tear-off stub with a pure-CSS barcode and notched perforation.

The two-part ticket structure

The pass is a flex container split into a white main section and a coloured stub. This mirrors a real boarding pass where the stub is the part torn off and retained at the gate. On narrow screens, a media query stacks the two parts vertically and rotates the perforation to a horizontal tear line — a thoughtful responsive adaptation that keeps the ticket metaphor intact.

The perforated tear edge

The perforation between the two parts is built from a repeating-linear-gradient that creates a dashed dotted line, plus two circular notches punched into the top and bottom of the seam using ::before and ::after pseudo-elements coloured to match the page background. These notches are the visual signature of a tear-off ticket — the same technique used for the gift card and other coupon designs.

The flight route visualisation

The route shows large three-letter airport codes (SFO, JFK), city names, and times. Between them, a flight path uses a dashed repeating-gradient line with a plane icon centred and a dot at each end. The dashed line evokes a flight trajectory on a map, and the plane sits at the midpoint pointing toward the destination.

The pure-CSS barcode

The barcode is a row of span elements with varying flex widths driven by nth-child selectors (every 2nd, 3rd, and 5th bar gets a different width). This produces an irregular, realistic barcode pattern without any image or library. It is decorative here, but in production you would replace it with a real scannable code from the QR code generator.

Typography and detail hierarchy

The design uses a clear hierarchy: oversized airport codes anchor the eye, uppercase micro-labels (Passenger, Flight, Gate) sit above their values, and the gate number is highlighted in the brand blue. font-weight and size contrast carry the information architecture, a technique that makes dense ticket data scannable at a glance.

Step by step

How to Use

  1. 1
    Update the flight detailsEdit the airport codes (SFO, JFK), city names, departure and arrival times, and the duration text to match your flight.
  2. 2
    Set passenger and gate infoChange the Passenger name, Flight number, Date, and Gate in the details grid. The gate uses a highlighted blue style to draw attention.
  3. 3
    Edit the stubUpdate the Seat, Boarding time, and Group on the coloured stub. The seat number uses an oversized style as the most important stub value.
  4. 4
    Brand the passChange the airline name and logo, and recolour the stub and accents by editing the brand blue values. The gradient page background can match your brand too.
  5. 5
    Add a real barcodeReplace the decorative CSS barcode with a real one — generate a Code128 or QR code from the ticket number using a library like JsBarcode or qrcode, and insert the resulting image or canvas in place of the span bars.
  6. 6
    Export for your frameworkClick "JSX" for a React component that accepts a flight prop object. Click "Vue" for a Vue 3 SFC. Click "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Travel and airline app digital boarding pass
Render a passenger's boarding pass from booking data in a flight app. Replace the decorative barcode with a real scannable Aztec or QR code that gate scanners can read. Add Apple Wallet and Google Wallet pass generation so travellers can save it to their phone's native wallet.
Booking confirmation and itinerary email
Show the boarding pass card on a post-purchase confirmation page or in a transactional email. The familiar ticket format reassures travellers that their booking is confirmed and surfaces the key details — gate, seat, boarding time — in a single scannable card.
Event ticket and concert pass adaptation
The tear-off ticket structure adapts directly to event tickets: replace airports with venue and section, the flight path with an event date band, and the stub with seat row and entry gate. The perforation and barcode metaphors are identical to physical event tickets.
Travel portfolio and design showcase piece
Designers use boarding pass recreations to demonstrate CSS skill — the perforation notches, barcode, and route visualisation are non-trivial pure-CSS effects. It makes a strong portfolio centrepiece that shows attention to real-world detail.
Study advanced CSS: notches, dashed seams, and barcodes
The snippet is a compact lesson in CSS techniques: punching circular notches with pseudo-elements, building dashed tear lines with repeating-linear-gradient, and faking a barcode with nth-child flex widths. These transfer to coupons, tickets, receipts, and any cut-out card design.
Loyalty card or membership pass template
Repurpose as a digital loyalty or membership card: the main section holds the member name and tier, the stub holds a member ID and barcode. The premium, physical-ticket aesthetic elevates a simple membership card into something that feels valuable and tangible.
Related: Direction-Aware Hover
See the Direction-Aware Hover for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Two techniques combine. The dashed line down the seam is a repeating-linear-gradient that alternates a visible colour and transparent every few pixels, producing a dotted perforation. The circular notches at the top and bottom of the seam are ::before and ::after pseudo-elements on the stub: each is a circle (border-radius: 50%) positioned half-off the left edge and filled with the same colour as the page background, so they read as holes punched into the ticket. Together they recreate the look of a real tear-off stub.

It is decorative — a row of span bars with varying widths set by nth-child rules to look like a real barcode without any image. For a scannable boarding pass, replace it with a genuine code generated from the ticket data: use JsBarcode for a Code128 barcode or the qrcode library for a QR code, rendering to a canvas or SVG. Airlines typically use the Aztec or PDF417 2D formats for boarding passes, which encode the full IATA BCBP data string.

A media query at 560px switches the flex direction from row to column, so the stub drops below the main section instead of sitting beside it. The perforation, originally a vertical line, is rotated to a horizontal repeating-gradient across the new seam, and the two circular notches are repositioned to the left and right of the top edge. This keeps the tear-off ticket metaphor intact on narrow screens where a side-by-side layout would be too cramped.

Accept a flight prop object: { airline, class, from: {code, city, time}, to: {code, city, time}, duration, passenger, flightNo, date, gate, seat, boarding, group, ticketNo }. Render the static markup from those values. For a real barcode, render a Barcode component (from react-barcode or similar) passing the ticket number. Generate Wallet passes server-side and offer Add to Wallet buttons alongside the visual card.