Lovelace: Banner card

I like to keep my HA front page light weight, clutter free and perhaps even a bit delightful for maximum partner approval :smiling_face_with_three_hearts: . After testing out various setups using glance and picture cards I ended up building a lightweight banner card that simply combines the three factors big bold text, interactive entity glances and warm fuzzy colors.

So here is my fluffy banner-card for the rest of ya’ll to consume if you too want a less tech-heavy HA view.

banner-card on Github

I use the card to represent snapshots of rooms instead of for example using a floorplan (which is cool but hard to use imo for every day usage).
The card looks best with 3 entities listed imo, but I do have some that have between 4 and 6 to produce two rows of glance entities.

Oh, if you find the name to be off in any way I must confess I had a hard time coming up with a satisfactory name, but banner-card feels close enough for me as it’s a bit inspired by billboard banners

Right now there is support for the light domain to render a toggle as that simply is my main need. I expect people will start asking for buttons for other domains and I’m sure I’ll add that as the requests come in; Or, please, do provide Pull requests on Github :smiling_face_with_three_hearts:

Feedback much appreciated as always

banner-card on Github

56 Likes

Great Job!!

i have a few questions

  1. when i turn on light the sofa icon not changing like in your photo.
  2. is there a way to stack all entities in the same line ?

this is my config:

  - type: custom:banner-card
    background: "#EDE7B0"
    heading: "\U0001F6CB Bedroom"
    link: /lovelace/0
    entities:
      - entity: light.bedroom_lights
        name: Lights
      - entity: switch.toshiba_tv
        name: TV
      - entity: fan.ceiling_fan
        name: Ceilling Fan
      - entity: sensor.bedroom_temp_temperature
        name: Temperature
      - entity: climate.mzgn_khdr_shynh
        name: AC

Looks great - is it possible to reduce the caption and the black part a bit?

1 Like

I did move font sizes into CSS vars and published a 0.2 so you can see what you can do with that.

  1. That is not changing in my photo. The downside of emojis are that they differ from OS to OS, thats why ours look different. The icon is just the weird part of the string in my examples, its an encoded UTF sequence referencing the emoji.
  2. No, I chose to lock it at 3 items and then wrap because thats simply what looked best. All you can do is to order your entities so that you have them logically grouped in order.
1 Like

thank you for the answer.

Are there any options for css from my side?

You can use the card-modder card to mess up the styles for banner-card easily to achieve this:

- type: custom:card-modder
  style:
    --bc-font-size-heading: 2em
    --bc-font-size-entity-value: 1em
  card:
    type: custom:banner-card
    ...

Set the sizes as you wish

1 Like

Can move (indicated by red arrow) to right or left.

@nervetattoo This is great work. Thanks for taking the time to put it together and share it. Is it possible to change the size [width] of each card? If I create a view to use on a wall-mounted tablet it only takes 4 cards

The width of the card is up to HA, not something that each card normally limits.
Do you mean each entity listed inside the cards lower block?

No I mean the entire card. Have a look at the view in this screenshot. Three cards with space for 1 more. I’d like to make each card smaller so I can fit more into the view

At first I had been wildly against the idea, but I think I’ve settled on making this customisable to some extent. I’ll get back to this soonish :wink:

Great! Let me know if you need contributor help. This has great potential and I’d like to be able to help

Great work! I love the simplicity of it. I will certainly be using it in my design.

Could you give an example of how to show the attribute?

And I would love to be the first to ask for a toggle button in the switch domain :slightly_smiling_face:

Thanks to some contributions and some more motivation after the good reception a 0.4 release was just published that contains some neat updates like switch+cover+media_player support, configurable grid for entities.
Read the changelog in the Github release here

1 Like

Looks good! Thanks :slight_smile:

1 Like

Hi there,

sorry to interrupt but would you mind sharing your theme, background image and especially your layout-css-config for the buttons?

I love your buttons in combination with your theme, but I was unable to completely recreate the style.
So it would be awesome to have your theme and button-css-template.

Thank you very much.

I have not finished working on the new design yet. For now you can follow the “old” design at the following link: https://github.com/abeksis/My-HomeAssistant-Config

Love these! So much easier to get an overview than a floorplan, exquisite job!

1 Like

Hi! Awesome card!! What attribute do i need to modify to get rid of the overlap in the corners? image