Vehicle Card

Features

• Range, fuel level, battery level, mileage, outside temperature and tyre pressure (front left, front right, rear left, rear right): whatever your car exposes
• Fuel gauge when you set the tank capacity, a low range warning (fuel plus battery range on a plug-in hybrid) and an optional low tyre pressure warning
• Charging status and time left, plug, lock, door and air conditioning status
• Location with the time of the last update; tap it to open the map
• Action buttons for every button of the vehicle (horn, flash lights, air conditioning, start/stop charge, refresh…), pressed with a confirmation tap, and the charge mode picker for electric cars
• Extra buttons of your choice (buttons): a switch, a script, a scene, a lock, a climate, your wallbox… toggled, run or locked from the card with the same confirmation tap
• The brand's logo next to the name (33 brands), black on light themes and white on dark themes
• The picture of your vehicle when the integration gives one (the official MyRenault photo with Renault Picture, the renders of Volkswagen group cars, Stellantis, Toyota, Volvo, Fiat / Jeep…) or your own picture, and a French licence plate drawn like the real one (EU band, department, and a traditional regional emblem for Brittany, Occitania, Île-de-France, Provence, Corsica and Burgundy)
• Optional lease tracking (LOA): mileage driven against the allowance, theoretical mileage expected today and the gap to it, kilometres left this month and per month until the end, end-of-lease projection (average or last 30 / 90 days) and estimated cost of the excess, always shown as a status; pace, contract year figures and a mileage chart folded by default
• Optional Orange Internet On the move section: data left, percentage, renewal or expiry date
• Connected services subscription of the VW group cars (SEAT, CUPRA… with VW Group Connect): end date and days left, in orange when inactive or ending within 30 days; an Offline chip when a Tesla (Teslemetry) has neither mobile network nor Wi-Fi
• Automatic entity discovery from the device, for 18 car integrations (whatever the entity IDs or the Home Assistant language)
• Visual editor in the dashboard UI (no YAML needed)
• English, French, German, Spanish, Serbian (Cyrillic and Latin), Italian, Dutch, European Portuguese, Polish, Romanian, Danish, Swedish, Bulgarian, Russian, Ukrainian, Hungarian, Slovak, Czech, Slovenian, Latvian and Greek, follows the Home Assistant language
• Light and dark theme compatible
• Ready for the Marketplace, no CDN: the map libraries ship with the card

Mini card (custom:vehicle-mini-card)

• The picture, battery level, range (battery, or fuel without a battery) and charging or plug state in half a row
• A button at the top right shows the full card; a click outside the card brings the compact view back
• Same options and visual editor as the vehicle card

Map card (custom:vehicle-map-card)

• All your vehicles on one map, whatever their brand (or the ones you pick), each with its picture, name and range
• Popup with the picture, location, last update, range, fuel, battery and mileage, plus Directions (Google Maps) and Details buttons
• Home marker
• Base maps without API key: Home Assistant's own map (vector, light or dark), OpenStreetMap, OpenStreetMap France, IGN map and aerial photos, OpenTopoMap, CyclOSM, Esri satellite, or your own tile URL
• Follows the light / dark theme

Supported integrations

The card picks the vehicle's entities by their translation keys (and entity IDs), so it works with these integrations as they are. What each one shows depends on what the car and the integration expose.

Optional integrations:

Note: the original rexave/hass-orange-internet-on-the-move integration is no longer maintained (it triggers Home Assistant deprecation warnings due in 2027.5 and 2027.8). ha-orange-internet-on-the-move replaces it in place: same domain, devices and entities, so the card keeps working without any change. See its migration guide.

Prerequisites

• Home Assistant 2024.8 or later with one of the supported car integrations set up
• Optional: the Orange Internet On the move integration, for the data plan section

Configuration

Visual editor#

Add the card from the dashboard (Add card → Vehicle Card). The first vehicle is picked automatically; change it with the Vehicle field, then set the name, picture, tank capacity and the sections to show. The Entities (advanced) panel lets you force an entity if auto-detection picks the wrong one. Options left at their default are not written to the YAML.

Vehicle picture#

The card shows the picture of your vehicle automatically, with nothing to set up, when its integration gives one:

• Renault: the official MyRenault photo, with the renault_picture integration
• Volvo: the picture the built-in integration returns (volvo.get_image_url action, Home Assistant 2025.9 or later)
• Volkswagen group (vag_connect), Uconnect: the integration's image entity of the car (Kia / Hyundai's surround view cameras are skipped)
• Stellantis Vehicles, Toyota: the picture of the vehicle's device_tracker

Without one, the card shows the brand's logo next to the name.

For another model, or to use your own photo, give the card any image, ideally a PNG or WebP with a transparent background. Put it in /config/www/renault/ and use /local/renault/<file>:

image: /local/renault/clio.png

Your image takes priority over the integration's picture. With no picture, or with show_image: false, the card shows only the brand's logo next to the name (or a car icon with show_logo: false, or for a brand without a logo).

Lease tracking (LOA)#

Set the lease start date, its duration in months and the yearly mileage allowance: the card adds a Lease section with the kilometres driven against the allowance, a marker for where you should be today, your yearly pace, the projected mileage at the end of the lease and a status:

• green: within the allowance, with the margin left at the end of the lease
• orange: at the current pace, you will go over the allowance (projected excess)
• red: the allowance is already exceeded

Below the bar (ticks mark the contract years): the theoretical mileage expected today and how far above or below it you are, the kilometres left this month out of the monthly allowance, and the kilometres per month left until the end of the lease. With extra_km_cost, the status adds the estimated cost of the excess.

The projection starts after 30 days. It uses the average since the start of the lease, or with forecast: 90 (or 30) the pace of the last 90 (or 30) days, which reacts faster to a change of habits.

Tap the section to unfold the details (a click anywhere else folds it back): pace, end-of-lease projection, the current contract year (contract years run from the start date) with its allowance and year-end projection, and the chart of actual mileage, allowance and projection. The history comes from the long-term statistics of the mileage sensor, kept by Home Assistant's recorder; it is fetched once an hour. The details are folded by default; set expand_lease: true to show them unfolded.

lease:
  start_date: "2024-12-01"
  duration: 37        # months
  km_per_year: 20000
  start_mileage: 12   # optional, odometer at delivery
  forecast: 90        # optional: 90 or 30 days, average since the start by default
  extra_km_cost: 0.08 # optional, per km, shows the cost of the excess

Also in the visual editor, in the Lease tracking panel. Without lease, the section is not shown.

The lease section unfolding on tap — pace, end-of-lease projection, contract year and the mileage chart — then folding back:

Minimal#

type: custom:vehicle-card
device_id: 5a8c1932ddf3f29163a275f06789b1bf

Use either device_id (what the visual editor writes) or entity (any entity of the vehicle). With neither, the card uses the first vehicle it finds.

Full options#

type: custom:vehicle-card
device_id: 5a8c1932ddf3f29163a275f06789b1bf
name: Espace
show_title: true
show_subtitle: true
fuel_tank_capacity: 55
low_range: 100
low_tyre_pressure: 2.2
show_plate: true
plate_department: "35"
show_location: true
show_actions: true
show_data_plan: true
data_plan_device_id: 63dc3dbab368191d3a6944a848e2c8ce
lease:
  start_date: "2024-12-01"
  duration: 37
  km_per_year: 20000
  start_mileage: 12
language: en
entities:
  mileage: sensor.espace_mileage
  location: device_tracker.espace_location

Options reference#

Mini card

Add it from the dashboard (Add card → Vehicle Mini Card). It takes the same options as the vehicle card, which it shows in full when you press the button at the top right; a click outside the card folds it back.

type: custom:vehicle-mini-card
device_id: 5a8c1932ddf3f29163a275f06789b1bf

Map card

Add it from the dashboard (Add card → Vehicle Map Card). With no vehicle selected it shows all the vehicles that have a location, whatever their brand.

type: custom:vehicle-map-card
title: Vehicles
map_style: ha
height: 400

The ha base map is the one Home Assistant's own map card uses (Home Assistant 2026.9 or later, WebGL2): OpenStreetMap vector tiles through your instance, in light or dark. On older versions or without WebGL2, the card falls back to OpenStreetMap raster tiles, also through Home Assistant when it can. Leaflet and MapLibre GL ship with the card (see licenses): only the map tiles come from the network.

Migrating from ha-renault-card

The repository was renamed and the Marketplace follows it: update the card as usual.

• custom:renault-card, custom:renault-mini-card and custom:renault-map-card still work and take the same options; new cards are added as custom:vehicle-card, custom:vehicle-mini-card and custom:vehicle-map-card
• The file is now vehicle-card.js (renault-card.js is no longer shipped since 3.0.1). The Marketplace registers the new file; if you added the dashboard resource by hand (/local/renault-card.js…), point it to vehicle-card.js, and check in Settings → Dashboards → Resources that no resource still loads renault-card.js

To tidy up, replace renault- with vehicle- in your card types.

How it works

The card reads the entity registry to list the entities of the chosen device, then matches each one by its translation key, then by its entity ID (English and French slugs), then by its attributes. Everything else the device exposes as a button becomes an action button, followed by the entities of the buttons option.

The brand comes from the device's manufacturer (else from the integration). Renault's logo is bundled; the 32 other logos (also in images/logos, as the tiles at the top of this README) (Simple Icons, CC0, and the CUPRA emblem from Wikimedia Commons) are in vehicle-card-brands.js, loaded only when a card shows another brand.

Action buttons need a second tap within 3 seconds, so a horn doesn't go off by accident.

Orange Internet On the move: the data plan device of ha-orange-internet-on-the-move is named after the car's tag on the portal (for example RENAULT Espace), so the card links it to the vehicle whose model matches. Set data_plan_device_id to pick one by hand. The card shows the data in GB above 1 GB, whatever the unit of the sensors (MiB, GiB, or the Mbit label of the unmaintained rexave integration). The date is shown as a renewal date for recurring plans, as an expiry date otherwise. Click the Orange logo to open the Orange Internet On the move customer area; click anywhere else in the section for the entity details.

Support

If you find this project useful, you can support its development:

Features

• show_title and show_subtitle options (also in the visual editor) hide the title (the name) and the subtitle (the model) of the header, separately, for a card placed under a section heading of its own (#72).

Improvements

• A model that only repeats the name (a device named after its model) is no longer shown twice in the header.

Documentation

• The Orange Internet On the move section now points to ha-orange-internet-on-the-move, which replaces rexave's integration, no longer maintained (same domain, devices and entities: no change needed in the card).

Documentation

• Screenshots: Tesla's render of the Model 3 (card, mini card and map).

Documentation

• show_picture of the map card: the vehicle picture is the one the integration gives, else the entity_picture of its device tracker, which can be set with customize (the Tesla Model 3 of the map screenshots).

Features

• CUPRA logo next to the name of a CUPRA (the emblem, from Wikimedia Commons), instead of the car icon.

Documentation

• The logos of the 33 brands at the top of the README.

Fixes

• The model keeps the maker's spelling ("Peugeot e-208", "Mercedes-Benz GLC 300 e"): only Renault's models, which its API gives in lower case, are recased.
• A CUPRA no longer shows the SEAT logo, but the car icon.
• Action buttons get a matching icon for more integrations: engine start and stop, preheating and climatization, locking, unlocking, refresh and wake up, hazard lights, charge stop (Stellantis), buzzer (Toyota).

Documentation

• Screenshots per brand: a card and a mini card, light and dark, for Renault, Tesla, Volvo, Škoda, Subaru, Peugeot (Stellantis), Kia, Toyota, Volkswagen, CUPRA and Mercedes-Benz, each set up with its integration's own entities, to show what the card displays for each brand, with the makers' renders of the models.