Heading Card Pro
custom:heading-card-pro names a part of a dashboard: a room, a group of devices, the state of the house. Like Home Assistant's own heading it has no card around it. Its badges are entities with the same keys, rules and actions as every Pro card, and they can draw more than a value: a ring, a bar, a sparkline, a trend, a count or a switch. This page starts with a title and adds options one at a time.
Basic
The type and a title. icon puts an icon before it; both take templates.
Badges
badges is a list of entities, drawn as pills at the end of the line. Every badge shows its icon and its value; tapping it opens the more-info dialog.
Styles
style sets the heading's size: section (small caps and a line, for a part of a view), title (the default), subtitle (smaller and quieter), big (a larger title beside the icon in a circle) and hero (a greeting's size). subtitle adds a line under the title, color colours the icon.
Badge styles and sizes
badge_style sets the pill of every badge: outline (the default, Home Assistant's badge: the card's background, border and shadow), soft (a tint of the badge's colour), filled or plain (no pill, the icon and the value alone). badge_size sets their height: s (24 px), m (30 px, the default) or l (36 px). A badge's own style and size override both.
Visuals
visual changes what a badge draws. ring puts a progress ring around the icon and bar a short bar before the value (both on min and max, as everywhere). sparkline draws the history of the last hours_to_show (6 by default) in the icon's place. trend adds how much the value changed over trend_hours (1 by default). count shows how many members of a group are on, and dot is a coloured dot instead of the icon. show_name: true writes the name before the value; show_value: false leaves the icon alone.
A switch in a badge
control: toggle puts a switch into the badge; the badge itself keeps its action. It is the only control a badge holds.
Rules
rules work as on every Pro card: the first match sets color, icon and label. On a badge a rule can also change its pill (style) and make it pulse (pulse: true); tint_card tints the heading. visibility shows a badge only while its conditions hold, here the open kitchen window.
Format and staleness
format writes the value another way: power switches between W, kW and MW, duration writes a time span (1h 12m), relative writes a date as its time from now (in 38 minutes). stale_after greys a badge whose entity has not reported for that long (a report of an unchanged value counts) and adds how long ago it did; it takes minutes or a number with s, min, h or d.
Position and alignment
badges_position places the badges: at the end of the line (the default; on a card narrower than 300 px they move below the title), inline right after the title, or below on a line of their own. align: center centres the title, the subtitle and the badges, for a panel or a wall tablet.
Many badges
More badges than fit wrap onto more lines. overflow: scroll keeps them on one line that scrolls and fades at its edges.
Actions
title_tap_action runs when the title (or its icon) is tapped, for example to open the room's dashboard. icon_tap_action gives the icon an action of its own; icon_tap_action: none keeps it still under a tappable title. Every badge keeps its entity's tap_action, hold_action and double_tap_action; the card's own set the defaults for all of them. See Actions.
Hover
A badge is a button, as Home Assistant's badges are: one with an action takes a light layer under the pointer and a stronger one while pressed, its switch too. A badge without an action (tap_action: none and no hold or double tap) keeps still. hover: false turns the layers off, on the card for every badge or on one badge for that one.
In other cards
The cards with a header (the group, sections, weather, wind, rain, power flow and energy flow cards) draw their header_entities with the same badges. There they are plain and s unless a badge says otherwise, so headers keep the look they had.
Reference
Card options
| Option | Default | Description |
|---|---|---|
style | title | section, title, subtitle, big or hero. |
title | The heading's text. Template allowed. | |
subtitle | The line under the title. Template allowed. | |
icon | The icon before the title. Template allowed. | |
color | secondary text (big: primary) | The icon's colour, a theme colour name or any CSS colour. Template allowed. |
title_tap_action | none | Action when the title or its icon is tapped. |
icon_tap_action | the title's | Action when the icon is tapped, instead of the title's; none keeps the icon still. |
align | start | start or center. |
badges_position | end | end (below on a card narrower than 300 px), inline or below. |
overflow | wrap | wrap or scroll. |
badge_style | outline | The pill of every badge: outline, soft, filled or plain. |
badge_size | m | The size of every badge: s, m or l. |
badges | Entity ids or badge objects. | |
hours_to_show | 6 | History window of sparkline and trend, at least 1. |
smoothing_minutes | Averaging bucket of sparkline in minutes, at least 5. | |
tap_action / hold_action / double_tap_action | more-info / more-info / none | Defaults for every badge, see Actions. |
hover | on for badges with an action | false turns the hover and press layers off for every badge, see Hover. |
Badge options
A badge takes the entity options (entity, name, icon, color, attribute, value, unit, decimals, prefix, suffix, min, max, show_entity_picture, rules, the actions, hover, visibility) and these:
| Option | Default | Description |
|---|---|---|
visual | icon | icon, ring, bar, sparkline, trend, count or dot. |
style | badge_style | outline, soft, filled or plain. |
size | badge_size | s, m or l. |
show_name / show_value / show_icon | false / true / true | What the badge shows. |
format | auto | auto, power, duration or relative. |
stale_after | Grey with its age when the entity has not reported for this long: minutes, or 90s, 30min, 2h. | |
trend_hours | 1 | trend: the hours the change is measured over (at most hours_to_show). |
control | toggle: a switch in the badge. |
A badge's rules also take style (the pill while the rule matches) and pulse: true (a ring that pulses around it).
Grid defaults
Full width, rows: auto; at least 3 columns. See Sizing in sections.
Home Assistant options
Like every card, this one also accepts grid_options, visibility, layout_options, view_layout and card_mod. They are passed through to Home Assistant; see Sizing in sections for grid_options. The card's own visibility hides the whole card; its badges take their own, see Visibility.