Lovelace: Banner card

[Corey_Maxim]

I understand the “time” and having a hard time finding it. I love HA but it is time consuming, and I don’t even program. I spend ALOT of time trying to figure out cards lol.

ok I got the Icons to work.

  - type: custom:banner-card
    background: "#EDE7B0"
    heading: "\ud83c\udfe1 Home"
    link: /lovelace/0
 #  entities:
 #    - entity: light.tree
 #      name: Lights  

It works fine, but if I comment out the entities part I get a error. I did upgrade to the newest version.
maybe somebody else here knows if im doing something wrong. If I can’t figure it out ill post on git hub.

[myle (StePhan McKillen (Other kiwi Here))]

LOVE THIS CARD

THANKS

[gabrielmiranda]

This is a great card! Congratulations on the work !!! But I’d like to request a new feature. Would it be possible to add a variable in which it shows the icon and the state of the entities? It would be a third line where the written state (custom) would appear. It would also be great if we could use images instead of icons in the map_state ​​attribute

[nervetattoo (Raymond Julin)]

Technically you should actually be able to get images by combining a few features:

entities:
  - entity: id
    image: true
    map_state:
      "off": <image a url>
      "on": <image b url>

Icon + state you can log a github issue for and I might consider it in the future

[Cezex]

I prefer a clean and unified look across the interface so I’ve modded the styling and made the banners look like the rest:

To achieve this look you need to replace the following styles in the banner-card.js:

  .heading {
    display: block;
    font-size: 24px;
    letter-spacing: -0.012em;
    line-height: 32px;
    opacity: 0.87;
    padding: 24px 16px 16px;
    font-weight: 400;
    text-align: left;
    margin: 0;
    color: var(--primary-text-color);
    width: 95%
  }

  .overlay-strip {
    overflow: hidden;
    width: 100%;
  }

  .entities {
    margin-top: -8px;
    padding: 0px 16px 12px 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -1px;
  }

  .entity-value {
    display: flex;
    width: 100%;
    flex: 1 0;
    padding-top: var(--bc-spacing);
    align-items: center;
    justify-content: center;
  }

  .toggle {
    cursor: pointer;
  }

[williamp0044 (Paul)]

Can the round buttons for the switches and lights be changed to icons that lighten and darken when toggled?

[WhistleMaster (Wm)]

Is it possible to have different icon or text colors based on state ? Such as by default with a motion sensor where there is a motion, the icon is yellow.

[loonysup (David Arlen)]

I came across this page looking for the same answer. I would like to have the icons display a different color based on state (i.e red when the garage is open and green when it’s closed). any luck with this?

[mclaudiopt]

hello
is this possible to implement?

type: 'custom:banner-card'
heading: "\U0001F6C1 Temperatura"
background: '#B0C2AA'
link: /lovelace/bathroom
cards:
entities:
  - entity: plant.planta
    name: Ficus Benjamina
    type: plant-status

[mclaudiopt]

Hello
anyway to solve this:
if an entity is not available, just show like that instead of error in all the card?
check below

[WhistleMaster (Wm)]

@nervetattoo Any news related to the PRs waiting to be merged with your repository ? Thanks for the great work !

[Eoin]

I’m going to start by warning people I’m new to HASS, just stated playing as I’m wanting to move away from WebCore.

I’m using hass.io installed on a synology diskstation, I’m having an issue adding a group of lights to banner-card, it’s showing as a value rather than a switch.

When adding ‘group.lights_livingroom_all’ to an Entity card it displays as a switch, as in I can turn group on/off. However when adding the exact same to Banner Card it displays the value, as in text saying ‘on’ or ‘off’. I suspect it might be an issue with how I’ve set the group up.

This is my code from Banner Card:

background: '#B0C2ED'
entities:
  - group.lights_livingroom_all
  - light.bookshelf_lamp
  - entity: sensor.netatmo_indoor_temperature
    name: Temp
  - entity: binary_sensor.aarlo_motion_livingroom
    name: Motion
heading: "\U0001F6CB Livingroom"
link: /lovelace/1
type: 'custom:banner-card'

Here is the code from groups.yaml:

  Lights.Livingroom.All:
    name: Lights.Livingroom.All
    entities:
    - light.bookshelf_lamp
    - light.dinning
    - light.livingroom_mini
    - light.tv

And finally a screenshot:

Thanks in advance!

[friendodevil]

Anyone able to get font sizes formatting to work w/card-mod style? :

• type: custom:banner-card
  style: |
  ha-card {
  –bc-font-size-heading: 3em;
  –bc-font-size-entity-value: 1.5em;
  border-radius: 5px;
  }
  heading: “\U0001F6C1 TEST”
  background: “#3366cc”
  row_size: 4
  entities:
  - entity: switch.debug
  name: Debug

[WhistleMaster (Wm)]

This is what I’m using:

style: |
  ha-card .heading {
    color: white;
    font-size: 2em;
    margin-top: 15px;
    margin-bottom: 15px;
  }

[Jamie_Pryer (JamieP)]

hey.
sorry, maybe a dumb question, however how did you get it to display the “apple” image, rather then the normal one (U0001F6C1) - or is this because you use a mac and thats how a mac shows the image?

[Tombstone (Aaron Twomey)]

Hi I don’t have an entity for this action is there a way I can do it with MQTT.

P.S I can make and entity up if need too

    background: "#EDE7B0"
    heading: "\U0001F6CB Bedroom"
    link: /lovelace/0
    entities:
      - entity: automation.green_house
        name: Green House Water
        value: mdi:book-open-page-variant
        action:
            - service: mqtt.publish
              data: {"payload": "ON", "topic": "cmnd/utilities/SprinklerSystem/POWER5", "retain": "0"}

Next thing is there action I can add my
input_number:_slider_1 as a slider

thanks love the card

[nervetattoo (Raymond Julin)]

I’m on vacation and have been spending my time on the beach while muting everything related to tech, so I’ve not had a look at any PRs or issues no Easing back to being online more now and will slowly be replying and processing everything over the coming week.

[mclaudiopt]

Hello to all
what is the best way to get more icons?

[wantknewmore (Alex)]

Hi. looks like Banner card support background image.

          - background: url(/local/home.png)
            entities:
              - attribute: state
                entity: switch.pc
                map_state:
                  'off': 'mdi:monitor-off'
                  'on': 'mdi:windows'
                name: PC

img

[roycebryan]

Is it possible to have a state shown as a different text. For instance I have a door listed when open shows “on” when closed shows “off”. I would like it to say “open” and "closed. I thought the attribute key would be used for this but for some reason I am having a hard time implementing.
Thanks