Lovelace: Banner card

Share your Projects! Dashboards & Frontend
21

I don’t quite see what you mean by overlap from this screenshot with just a fragment of the rendered card. Could you share a screenshot with more data; Possibly redact it with black boxes if there’s anything you don’t want to show like entity names or values :slight_smile: Or describe it a bit better

22

Do I understand you correctly in that you want the entity name to be right/left aligned not centered? If so no that is not something you can do.

1 Like
23

When I use rounded corners the bottom corner gets like this: Screenshot_20190522_224538

24

All other cards looks like this:Screenshot_20190522_224919

25

In my view it’s the same thing

26

I think you can use card-modder with overflow: hidden as part of the config. There was a discussion on the same issue in the button-card thread and using that config in the styles: section was the apparent fix. I haven’t tried it myself however.

EDIT: Mistake corrected. I shouldn’t post when I’m tired. Thanks for pointing out my error @nervetattoo

1 Like
27

Yes, you will have to set overflow: hidden (not overlap) yourself

2 Likes
28

Yes! You are correct :grinning:thanks!!

chrome
chrome2340×1080 664 KB

29

Hi, how do I change the heading icon?is there a list of the codes for every icon?

t

30

I use this…
http://www.unicode.org/emoji/charts/full-emoji-list.html

3 Likes
31

great thank you

32

Hi,
great card. I like to show icons instead of text for my motion sensor (binary_sensor).
So I put

- entity: binary_sensor.motion
  map_state: {on: mdi:run, off: mdi:walk}

to the banner card but it throws an error

while scanning a plain scalar in "/config/ui-lovelace.yaml", line 1087, column 23 found unexpected ':' in "/config/ui-lovelace.yaml", line 1087, column 26

Even if I copy your code @ github I got this error.

Hope somebody could help me :slight_smile:

33

Looks awesome, might find a place for this in the future. Great work!

34

Sorry about that; I had added invalid example code in the docs.
You can write it almost as my example, just add quotation marks around the keys and values inside the object: {"off": "mdi:icon", ...}, but the only reason I wrote it as that in the docs was that line breaks in a table cell in a Github markdown file doesn’t work well … I’m digressing :flushed:
Use the regular syntax you are used to for key<->value pairs like so:

- entity: binary_sensor.motion
  map_state:
    "on": mdi:run
    "off": mdi:walk

I will improve the docs to instead have some full examples when I find time

1 Like
35

Thanks. This works perfect.:+1:

36

This looks great!

Can the entity option be excluded?

It would be helpful to use this as a redirect button.

37

Turns out that “feature” were actually broken in the last release. It is fixed in the steaming fresh 0.5.0 release that I just cut

38

I just released a 0.5.0 with several nice to have features like:

  • Filter entity with a when rule
  • Display images
  • Simple buttons to trigger a service call
  • A few bug fixes

Full release notes:

1 Like
39

just a few questions.

I assume this is not correct to just show the banner.

  • type: horizontal-stack
    cards:
    • type: custom:banner-card
      background: “#00B9FF”
      heading: Home
      link: /lovelace/0

Any chance anybody could show a example of how this would work?

also how do i use icons in the config.

Im going to get full use out of this card! Thanks for making it!!!

40

That is correct for just showing a linkable heading.
For icons someone wrote about how they did it earlier in this thread. I want to make it easier to find emoji codes and construct heading strings, but its hard to carve out time for :confused:
For overall usage refer to the docs. If something in the docs is unclear, let me know here or preferably as a Github issue (easier to track).