Lovelace Extended Banner Card

Based on powerful Boilerplate card example and beautiful Banner card.

Main differences

Actions

Supports regular Lovelace actions on the header and each entity

Extended header configuration

header should be used instead of heading with new options:

header:
    title:
        - mdi:television
        - Living Room
    tap_action:
        ...
    hold_action:
        ...
    mini: true

Mapping attributes

Use map_attribute to rewrite entity fields the same way as with map_state

Toggles

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.

Media player

• Default tap_action is more-info
• Actions are handled on name and media title elements
• Skip buttons replaced with volume controls

Other improvements

• Increased render performance
• color could be applied to text state as well

Card configuration:

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

Header configuration

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

Entities configuration

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

State mapping

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

Attribute values mapping

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'

Using when

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:

When operators

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]