Based on powerful Boilerplate card example and beautiful Banner card.
Supports regular Lovelace actions on the header and each entity
header
should be used instead of heading
with new options:
header:
title:
- mdi:television
- Living Room
tap_action:
...
hold_action:
...
mini: true
Use map_attribute
to rewrite entity fields the same way as with map_state
light
, input_boolean
and switch
are now rendered with text states by default, but you can still render toggles with toggle: true
for entity configuration.
- Default
tap_action
ismore-info
- Actions are handled on name and media title elements
- Skip buttons replaced with volume controls
- Increased render performance
color
could be applied to text state as well
Key | Type | Description |
---|---|---|
type | *string | Always 'custom:extended-banner-card' |
header | string or map | Remove to hide header. See header configuration for options |
background | string | A valid CSS color to use as the background |
color | string | A valid CSS color to use as the text color |
entities | *list | A list of entities to display. See entities configuration |
row_size | number or string | Number of columns in the grid. 3 is the default and what looks best in many cases. Set to auto to set row_size to a number of entities |
Key | Type | Description |
---|---|---|
title | string or list | The heading to display. Can be a list with texts and icons. |
mini | boolean | Set to true to make header smaller |
tap_action | map | See Lovelace Tap-Action |
hold_action | map | See Lovelace Hold-Action |
Big header with icon and text:
header:
mini: false
title:
- mdi:shower
- Bathroom
Could be a list of string entity ids, or a map with:
Key | Type | Description |
---|---|---|
entity | string | Entity ID |
value | string | The text or MDI icon to show as state |
unit | string | Override for units of measurement |
name | string | Override for entity name |
attribute | string | The name of an attribute to display instead of the state |
map_state | map | Override entity options for specific state. See state mapping |
map_attributes | map | Override entity options for specific attribute value when displaying attribute instead of the state. See attribute values mapping |
size | number | Override how many "entity cells" this entity will fill. The default for most entities is 1 cell, except if you include a media_player which will use whatever is the value for row_size, thus full width. |
when | map | Entity displaying conditions. See using when |
image | boolean | Set to true to force value displaying as a rounded image |
tap_action | map | See Lovelace Tap-Action |
hold_action | map | See Lovelace Hold-Action |
toggle | boolean | Set to true to render light , switch or input_boolean as a toggle |
You can use map_state
to force a value or icon to be rendered when the entity has a certain state. It either supports a full object where you can override any key for the entity, like value
, name
, unit
, color
and so on, or a shorthand string that maps to value
.
Both forms in the example:
entity: media_player.office
map_state:
playing: mdi:disc-player
not_playing:
value: mdi:stop
name: A custom entity heading
color: red
You can use map_attribute
to force a value or icon to be rendered when the entity attribute has a certain value. It either supports a full object where you can override any key for the entity, like value
, name
, unit
, color
and so on, or a shorthand string that maps to value
.
entity: climate.child_room
attribute: hvac_action
map_attribute:
heating:
value: 'mdi:radiator'
idle:
value: 'mdi:radiator-disabled'
'off':
value: 'mdi:radiator-disabled'
color: '#ffffff44'
You can filter entities with a simple but powerful when
option. This allows you to filter based on state and/or attributes. See examples below.
This limits to only showing a media_player entity when it is playing. It uses the shorthand form for when
where a simple string is used instead of specifying an object with state key.
entity: media_player.office
when: playing
This example limits to only showing a light entity when its on and above a certain brightness
entity: light.my_light
when:
state: "on"
attributes:
brightness: [">", 50]
The last example shows how passing a simple string/number will imply an equality operator check, whereas you can configure using an array to using different operators. The following operators exist:
Operator | Description | Example |
---|---|---|
= |
Equal check to either match a string/number/boolean input, or if given an array, check that the real value exists inside said array. This is the default operator used when a simple value is set | state: ['=', 'on', 'off'] |
!= | Not equal check that is exactly like the equal check, just negated (opposite results) | fan_mode: ['!=', 'On Low', 'Auto Low'] |
> | Bigger than checks if real value is bigger than what is set. Does not support multiple values | brightness: ['>', 50] |
< | Smaller than checks if real value is smaller than what is set. Does not support multiple values | brightness: ['<', 50] |