Weather Alerts Card

A custom Home Assistant Lovelace card for displaying weather alerts with severity indicators, progress bars, and expandable details. Supports NWS (US), BoM (Australia), MeteoAlarm (Europe), DWD (Germany), MeteoSwiss (Switzerland), ECCC (Canada), NSW RFS (Australian bushfire), PirateWeather, and CAP Alerts (multi-region).

Features

• Multi-provider — NWS (US), BoM (Australia), MeteoAlarm (Europe), DWD (Germany), MeteoSwiss (Switzerland), ECCC (Canada), NSW RFS (Australian bushfire), PirateWeather, and CAP Alerts (multi-region) with auto-detection
• Color themes — severity-based (default), NWS official event colors, MeteoAlarm awareness level colors, or ECCC public-alert colors
• Time progress bars — elapsed/remaining time with relative and absolute timestamps
• Alert headlines — contextual subtitle from provider data, with optional redundancy filtering
• Expandable details — sanitized description, instructions, and source link
• Affected-area mini-map (CAP) — optional inline outline of the alert's polygon, with an opt-in raster-tile basemap for geographic context (showGeometry)
• BoM phase badges — New, Updated, Renewed lifecycle indicators
• Compact layout — collapsed single-row alerts with progress bars that expand on tap
• Zone filtering — show only alerts for specific zone codes (CAP Alerts geocodes, BoM area_id); see the zones note for provider support
• Dismissable alerts — optional per-alert dismiss (button or swipe) with undo and a restore-all control, stored browser-locally
• Broken-source safety badge — when a configured sensor goes unavailable/unknown, a degraded indicator names the broken source instead of silently showing "no alerts" (a dead feed is never treated as proof of safety) (unavailableBehavior)
• Sort order — default, onset time, or severity
• Severity threshold — minimum severity to display (unclassified alerts always shown)
• Localized UI — English, French, Spanish, Italian, and German; auto-detected from Home Assistant locale
• Visual config — no YAML editing required

Themes

Surface theming (--wac-* tokens)

The card exposes a small, stable set of CSS custom properties for its surfaces. Set them from theme YAML, card-mod, or a dashboard style: block — no card config needed. Unset, every token falls back to the value the card has always used, so the default look is unchanged.

The outer <ha-card> is the single painted surface; each alert box defaults to a transparent fill and reveals it. That means a translucent theme (--ha-card-background: rgba(...)) renders its alpha exactly once, instead of compounding into a "solid" look on the alert bodies. The standard --ha-card-background, --ha-card-border-radius, and --ha-card-box-shadow also work as expected.

Left: a translucent theme (alert bodies transparent, so the surface alpha lands once). Right: a pill/chip look (transparent wrapper, filled boxes). Both come from the card-mod examples below.

type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
provider: nws
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(40, 40, 40, 0.6);
      --wac-alert-background: transparent; /* default; alert bodies stay translucent */
    }

type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
sortOrder: severity
layout: compact
provider: nws
card_mod:
  style: |
    ha-card {
      --wac-card-background: transparent;
      --ha-card-box-shadow: none; /* flatten the now-invisible outer wrapper */
      --wac-alert-background: rgb(40, 40, 40);
      --wac-alert-border: none;
      --wac-alert-border-radius: 28px;
      --wac-alert-shadow: none;
      --wac-alert-gap: 8px;
    }

Quick Start

1. Install a weather alerts integration for your region (see Supported Providers)
2. Install this card via HACS: search "Weather Alerts Card"
3. Add to your dashboard and select your alert entity

Installation

HACS (recommended)

Then click the Download button, and click Reload when prompted.

Manual

1. Download weather-alerts-card.js from the latest release
2. Copy to config/www/weather-alerts-card.js
3. Add as resource: Settings → Dashboards → Resources → URL: /local/weather-alerts-card.js, Type: JavaScript Module

Configuration

Surface appearance — backgrounds, borders, corners, shadows, translucency — isn't configured here; it's themed via CSS. See Surface theming (--wac-* tokens).

type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts

type: custom:weather-alerts-card
entity: sensor.sydney_warnings
provider: bom
title: Weather Alerts
zones:
  - NSW_FL049

type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
colorTheme: nws
layout: compact
sortOrder: severity

type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
eventCodes:
  - TOR
  - SVR
timezone: browser

type: custom:weather-alerts-card
entity: sensor.nws_alerts_alerts
progressStyle:
  preparation: solid      # a straight (undecorated) pre-onset bar instead of diagonal dashes
  active: striped         # stripes that march with the bar (right)
iconBorderStyle:
  preparation: solid      # solid pre-onset ring instead of the default dashed

type: custom:weather-alerts-card
entity: binary_sensor.meteoalarm
colorTheme: meteoalarm

type: custom:weather-alerts-card
entity: sensor.sydney_warnings
provider: bom

type: custom:weather-alerts-card
entity: sensor.dwd_weather_warnings_hamburg_current

type: custom:weather-alerts-card
entity: sensor.dwd_weather_warnings_current
entities:
  - sensor.dwd_weather_warnings_advance

type: custom:weather-alerts-card
entity: sensor.weather_warnings_at_8000

type: custom:weather-alerts-card
entity: sensor.marathon_alerts

type: custom:weather-alerts-card
entity: sensor.marathon_alerts
colorTheme: eccc

type: custom:weather-alerts-card
sources:
  - nsw_rural_fire_service_feed

type: custom:weather-alerts-card
entity: sensor.pirateweather_alerts

type: custom:weather-alerts-card
device: 1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d

Supported Providers

The card auto-detects the provider from entity attributes. Any integration that produces a compatible data shape will work.

Note on ECCC. For Environment and Climate Change Canada alerts, use CAP Alerts (provider: eccc). It is the only ECCC source this card recommends — neither the bundled HA core environment_canada integration nor the HACS environment_canada fork is routed to. See Canada: ECCC via CAP Alerts below for why.

Canada: ECCC via CAP Alerts

For Environment and Climate Change Canada (ECCC) alerts, CAP Alerts (provider: eccc) is the source to use. It ingests the NAAD CAP firehose, creating one sensor per active alert under a Home Assistant device. That carries raw CAP severity and certainty, preserves the original multi-region alert polygons, and unlocks the showGeometry affected-area mini-map.

Point the card at the device and it auto-discovers every active alert, re-discovering as alerts come and go:

type: custom:weather-alerts-card
device: 1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d
colorTheme: eccc      # ECCC's official red/orange/yellow/grey palette
showGeometry: true    # affected-area mini-map

Pick the device from the editor's CAP Alerts device selector rather than hand-typing the id. The provider auto-detects as eccc; set provider: eccc explicitly only if you've disabled auto-detection.

Why not the other ECCC integrations? Two other ECCC integrations exist, but neither is the right source for this card:

• HA core environment_canada exposes rich alert detail only through a get_alerts action (#172393, merged in place of the attribute-based #164481). A Lovelace card reads state and attributes during render and can't consume an action response, so core can't drive this card.
• The HACS environment_canada fork does surface alert attributes, but it's a stop-gap its own maintainer would rather not keep running (see discussion #3130), and it overrides the core integration's domain. Out of respect for that, we don't route ECCC users to it; CAP Alerts is the entity-based path the card author maintains for rich alert data.

Heads-up if you also run environment_canada for weather. Its alert list (GeoMet WFS, filtered by a point-in-polygon test against your coordinates) won't line up with CAP Alerts' (NAAD CAP polygons, ingested directly). The WFS feed lags and truncates NAAD coverage, so an alert can show up in one and not the other — that's upstream behaviour, not the card.

Data Fidelity

Severity and certainty badges are always localized to your configured language. When a value was inferred by the card's adapter logic (rather than provided directly by the alert source), it is rendered with italic text and a tilde prefix (~Moderate) so you can tell at a glance which badges reflect actual provider data.

Development

npm install
npm run build     # bundle → dist/weather-alerts-card.js
npm run watch     # bundle with file watching
npm run lint      # TypeScript type-check

Migrating to v3

v3.0.0 removes backwards-compatibility shims that were deprecated in v2. If you are upgrading from v1.x or v2.x, make the following changes:

1. Card type rename (v1.x users only)

Change the card type in your dashboard YAML:

# Before
type: custom:nws-alerts-card

# After
type: custom:weather-alerts-card

2. headline config key removed (v1.x users only)

The headline key was replaced by deduplicateHeadlines in v2. If your card config still has headline:, rename it:

# Before
headline: true   # or false

# After
deduplicateHeadlines: true   # or false

3. Manual install only: resource filename changed

If you installed manually (not via HACS), update the resource path in Settings → Dashboards → Resources:

HACS users: no action needed — HACS manages the resource path automatically.

Support

If you find this card useful, tip me at Ko-fi to support development, or donate to The Y'all Squad — a rapid-response program providing direct aid, chainsaws, and supplies to families affected by severe weather events.

Resources: Home Assistant Community thread