Banner Card


I am using the banner card from the link below. I am struggling to see how I can get the light to show as a button as like in this example.

This is how mine is showing with the name and when you click it is does not turn the light on or off. Not sure what I am missing here.

type: custom:banner-card
  - mdi:shower
  - Bathroom
background: '#B0C2ED'
link: /lovelace/bathroom
  - entity: light.bathroom_main
    name: Light
  - entity: sensor.bathroom_heating
    name: Temperature
  - entity: sensor.bathroom_humidity
    name: Humidity

your code looks fine so I’d suggest you open an issue on the repo than here

Its already registered an issue for this at the repo.

Thanks. The workaround with editing the file seems to have done the trick and I can see the light as a button. Thank for sharing the post.

I’ve now got the light working…i just need to figure out those sexy icons for bath etc. They look so much nicer the the mdi icons.

If you find out please let me know also.

Yeah, no problem :smile:

Found it :slight_smile:

Put this in the appropriate place in your code
heading: “\U0001F6CB Living room”

that will give you a sofa.

What you need to do is google the name of the image you want, it appears that they are emojis.
So in google type ‘bathtub unicode’
you will get ’ U+1F6C1’ as a result, then just change the last 5 characters in your code.
heading: “\U0001F6CB Living room”
so it becomes

For example, \U0001F6C1 and you will get a bathtub icon.
Hope that makes sense.

Fantastic. Thanks, mate

No probs, glad to help

How did it work

It seems that the original author abandonded the project or does not merge PRs, 2 forks seem to fix the bugs without fiddling around with js:

To exchange follow:

I currently use the fork from @jak119 as it is newer than the one from @crempp

And if someone found out how I can toggle the light or switch in the heading that would be great, I am struggling. I tried to set the action under entity for the card instead of one displayed entity, but it does not do the trick.

type: custom:banner-card
  - mdi:office-building
  - Office
  service: light.toggle

Instead of pressing each button under the nice big header, I want to press the text and the icon of the header to switch the whole room (the entitiy of the header switches the zigbee group containing all lights in that room)

It seems that this card is affected by the depreciation of polymer: Deprecating Polymer | Home Assistant Developer Docs

Are there any plans how to move on with this card?