webdevpuneet.com

Related Snippets

147 in Cards category
40–45 of 60

Rental Car Comparison Cards

Restaurant Menu Item Customizer

Hotel Room Type Picker

Virtual Tour Badge

Property Listing Card

Product Bundle Builder

Rental Car Comparison Cards — Free Class Comparison Snippet

Rental Car Comparison Cards · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsSVGCSS Grid

Copy & paste

Source Code

<div class="rcc-wrap">
  <h2 class="rcc-heading">Choose your rental class</h2>
  <div class="rcc-cards" id="rccCards">
    <article class="rcc-card" data-class="economy">
      <svg class="rcc-silhouette" viewBox="0 0 120 48" fill="none"><path d="M8 34c0-5 4-9 10-10l8-11c2-3 5-4 9-4h18c4 0 7 1 9 4l7 11c6 1 10 5 10 10v6a3 3 0 0 1-3 3h-5a8 8 0 0 1-16 0H32a8 8 0 0 1-16 0H9a3 3 0 0 1-3-3v-6z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>
      <h3 class="rcc-name">Economy</h3>
      <p class="rcc-model">Toyota Yaris or similar</p>
      <div class="rcc-capacity">
        <span class="rcc-cap-item">👤 4</span>
        <span class="rcc-cap-item">🧳 2</span>
      </div>
      <span class="rcc-price">$38<small>/day</small></span>
      <button type="button" class="rcc-select" data-class="economy">Select</button>
    </article>

    <article class="rcc-card rcc-featured" data-class="suv">
      <span class="rcc-badge">Best value</span>
      <svg class="rcc-silhouette" viewBox="0 0 120 48" fill="none"><path d="M6 36c0-6 4-10 11-11l6-14c2-4 6-6 11-6h20c5 0 9 2 11 6l6 14c7 1 11 5 11 11v4a3 3 0 0 1-3 3h-6a8 8 0 0 1-16 0H31a8 8 0 0 1-16 0H9a3 3 0 0 1-3-3v-4z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>
      <h3 class="rcc-name">SUV</h3>
      <p class="rcc-model">Honda CR-V or similar</p>
      <div class="rcc-capacity">
        <span class="rcc-cap-item">👤 5</span>
        <span class="rcc-cap-item">🧳 4</span>
      </div>
      <span class="rcc-price">$64<small>/day</small></span>
      <button type="button" class="rcc-select" data-class="suv">Select</button>
    </article>

    <article class="rcc-card" data-class="luxury">
      <svg class="rcc-silhouette" viewBox="0 0 120 48" fill="none"><path d="M6 34c0-5 4-9 10-10l10-10c3-3 6-4 10-4h16c4 0 7 1 10 4l10 10c6 1 10 5 10 10v5a3 3 0 0 1-3 3h-6a8 8 0 0 1-16 0H31a8 8 0 0 1-16 0H9a3 3 0 0 1-3-3v-5z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>
      <h3 class="rcc-name">Luxury</h3>
      <p class="rcc-model">BMW 5 Series or similar</p>
      <div class="rcc-capacity">
        <span class="rcc-cap-item">👤 5</span>
        <span class="rcc-cap-item">🧳 3</span>
      </div>
      <span class="rcc-price">$112<small>/day</small></span>
      <button type="button" class="rcc-select" data-class="luxury">Select</button>
    </article>
  </div>
  <p class="rcc-chosen" id="rccChosen">No car selected yet.</p>
</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

Inline SVG silhouettes
Recolor with currentColor, no image assets.
Glanceable capacity icons
Seats and bags shown as icon-number pairs.
Featured card badge
Static markup nudge toward a recommended class.
Card-level selection state
data-selected drives every visual change.
Single-selection loop
Only one card can be selected at a time.
Confirming button label
Select becomes "Selected ✓" on the active card.
Plain-language summary
A line below confirms the chosen class.
Zero dependencies
Plain HTML, CSS, and JS, no CDN.

About this UI Snippet

Rental Car Comparison Cards — Silhouettes, Capacity, and a Chosen State

Screenshot of the Rental Car Comparison Cards snippet rendered live

The rental car comparison card is the row of class options rental sites show before checkout — Economy, SUV, Luxury — each with a car silhouette, seat and bag capacity, a price per day, and a select button that visibly marks the chosen class. This snippet builds it in plain HTML, CSS, and JavaScript, no dependencies.

One inline SVG silhouette per class

Each card's icon is a hand-drawn inline SVG path rather than a photo, so it recolors with currentColor and scales crisply at any size. The three paths are deliberately similar but not identical — the SUV's is taller and boxier, the luxury car's roofline is longer — so the silhouettes alone hint at the class difference before you read a single label.

Capacity as glanceable icon pairs

Seats and bags render as small emoji-plus-number pairs (👤 5, 🧳 4) rather than a sentence, matching how comparison tables on real rental sites present capacity — fast to scan across three cards side by side.

A featured card, set apart in markup

The SUV card carries an extra .rcc-featured class and a "Best value" badge — a common rental-site nudge toward the middle option. It's a static markup difference, not JS-driven, so promoting a different class to "featured" is a one-line HTML change.

Selection state lives on the card, not just the button

Clicking any "Select" button sets data-selected="true" on its parent card and "false" on the other two, and every visual change — border color, background tint, lift, silhouette recolor, button relabeling to "Selected ✓" — is driven by that one attribute per card. A summary line below the cards confirms the chosen class in plain language.

Single-selection logic in one loop

The click handler loops over every card to reset its data-selected attribute before applying the new selection, so there's never a state where two cards claim to be selected — the same pattern you'd use for a mutually exclusive card group backed by radios, but written as plain buttons here since the UI reads more like a comparison than a form.

Customizing it

Add a fourth class, wire the price to real per-day rates from a rental API, or turn the buttons into real radio inputs if the cards live inside a booking form. Pair it with a flight search form, property listing card, or radio card group elsewhere in a trip-planning flow.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThree rental class cards render side by side.
  2. 2
    Click Select on a cardThat card lifts, recolors, and its button confirms.
  3. 3
    Note the featured badgeThe SUV card is marked "Best value" in markup.
  4. 4
    Read the summary lineConfirms which class is currently chosen.
  5. 5
    Add a fourth classCopy a card, adjust its silhouette path and data.
  6. 6
    Wire real pricingReplace the static price with rental API data.

Real-world uses

Common Use Cases

Car rental booking
Show Economy, SUV and Luxury classes with seat and bag capacity, following a flight search form in a travel flow.
Trip planning dashboards
Combine with a property listing card so a trip plan covers both where to stay and how to get around.
Booking flow hand-off
Feed the chosen class into a checkout form, with data-selected driving every visual change on the card.
Comparison page patterns
Compare with a radio card group, noting how inline SVG silhouettes recolour with currentColor and need no image files.
Corporate and peer-to-peer rentals
Let travellers choose within a policy class, or compare vehicle types before booking on a peer-to-peer app, using a featured badge to guide the choice.

Got questions?

Frequently Asked Questions

Clicking a Select button sets data-selected="true" on its own card and "false" on the other two. Every visual change tied to selection — border color, background tint, a slight lift, the silhouette's recolor, and the button's relabel to "Selected ✓" — is a CSS or JS rule keyed off that one attribute per card.

No, each is an inline SVG path drawn to resemble a car silhouette, so it inherits color via currentColor and stays crisp at any size. The three paths differ slightly in proportion (economy is compact, SUV is boxier and taller, luxury has a longer roofline) to hint at the class visually.

The click handler loops over every card on each click, first resetting all three data-selected attributes to false, then setting true only on the card matching the clicked button's data-class. This guarantees exactly one card is marked selected after every click.

Move the rcc-featured class and the .rcc-badge markup from the SUV article to whichever card should be highlighted — it's a static structural change, not something driven by JavaScript, so no script changes are needed.

Yes — if these cards live inside a larger booking form, swap each Select button for a visually hidden radio input sharing a name, using the input:checked + selector pattern (as in the hotel room picker snippet) to drive the same selected styling, which also gives you native form submission of the chosen class.