{"id":13576852,"url":"https://github.com/nervetattoo/banner-card","last_synced_at":"2025-04-12T14:57:32.067Z","repository":{"id":35642523,"uuid":"186765704","full_name":"nervetattoo/banner-card","owner":"nervetattoo","description":"A fluffy banner card for Home Assistant 🥰","archived":false,"fork":false,"pushed_at":"2023-02-03T04:52:53.000Z","size":1304,"stargazers_count":644,"open_issues_count":76,"forks_count":57,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-12T14:57:29.045Z","etag":null,"topics":["custom-cards","hassio","home-assistant","home-assistant-custom","home-assistant-frontend","lovelace","lovelace-ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nervetattoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["nervetattoo"],"custom":["https://www.buymeacoffee.com/nervetattoo/"]}},"created_at":"2019-05-15T06:45:50.000Z","updated_at":"2025-04-08T12:50:43.000Z","dependencies_parsed_at":"2023-02-18T03:15:44.259Z","dependency_job_id":null,"html_url":"https://github.com/nervetattoo/banner-card","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fbanner-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fbanner-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fbanner-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fbanner-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nervetattoo","download_url":"https://codeload.github.com/nervetattoo/banner-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586250,"owners_count":21128997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-cards","hassio","home-assistant","home-assistant-custom","home-assistant-frontend","lovelace","lovelace-ui"],"created_at":"2024-08-01T15:01:15.033Z","updated_at":"2025-04-12T14:57:32.046Z","avatar_url":"https://github.com/nervetattoo.png","language":"JavaScript","funding_links":["https://github.com/sponsors/nervetattoo","https://www.buymeacoffee.com/nervetattoo/","https://www.buymeacoffee.com/nervetattoo","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":["Lovelace User Interface","Install from Source","Dashboards","JavaScript"],"sub_categories":["Custom Lovelace UI Cards","Smart Home Automation","Custom Cards"],"readme":"# Lovelace banner card\n\nA fluffy linkable banner with interactive glances to spice up your home dashboards\n\n| ![Example 1](/screenshots/living-room.png) | ![Example 2](/screenshots/bathroom.png) |\n| ------------------------------------------ | --------------------------------------- |\n| ![Example 3](/screenshots/kitchen.png)     | ![Example 2](/screenshots/office.png)   |\n\n## Installation\n\n[`Try HACS first`](https://hacs.xyz/)\n\n1. Download the `banner-card.js` from the [latest release](https://github.com/nervetattoo/banner-card/releases/latest) and store it in your `configuration/www` folder.\n   _Previously you could download the source file from Github but starting from the 0.14 release that is no longer possible. If you try to do so it will crash_\n2. Configure Lovelace to load the card:\n\n```yaml\nresources:\n  - url: /local/banner-card.js?v=1\n    type: module\n```\n\n\u003ca href=\"https://www.buymeacoffee.com/nervetattoo\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=nervetattoo\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Cookie\u0026outline_colour=000000\u0026coffee_colour=ffffff\"\u003e\u003c/a\u003e\n\n## Available configuration options:\n\n| Key                  | Type                 | Description                                                                                                                                                                                                 | Example                                                                                                                                          |\n| -------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| heading              | \\_string             | array\\_                                                                                                                                                                                                     | The heading to display. Set to false to hide header (**Note**: Also remember to escape!). Can also be an array, with icons.                      | `heading: \"\\U0001F6CB Living room\"` |\n| background           | _string_             | A valid CSS color to use as the background                                                                                                                                                                  | `background: \"#EDE7B0\"`, `background: red`                                                                                                       |\n| color                | _string_             | A valid CSS color to use as the text color                                                                                                                                                                  | `color: \"#EDE7B0\"`, `color: red`                                                                                                                 |\n| link                 | _string_             | A link, to a different view in HA for example                                                                                                                                                               | `link: /lovelace/living_room`                                                                                                                    |\n| entities             | _array_              | An array of entities to display for glances. Either as strings or as objects                                                                                                                                | `entities: [binary_sensor.remote_ui]`                                                                                                            |\n| row_size             | \\_number             | string\\_                                                                                                                                                                                                    | Number of columns in the grid. 3 is the default and what looks best _in many cases_. Set \"auto\" to equal row_size to number of entities provided | `row_size: 4` |\n| entities[].entity    | _string_             | Entity id                                                                                                                                                                                                   | `- entity: binary_sensor.remote_ui`                                                                                                              |\n| entities[].unit      | _string_ or _false_  | Override the automatic unit                                                                                                                                                                                 | `unit: My unit`                                                                                                                                  |\n| entities[].name      | _string_             | Override the automatic usage of friendly_name                                                                                                                                                               | `name: A sensor`                                                                                                                                 |\n| entities[].map_state | _object_             | Map state values to resulting text or icons. A string prefixed with mdi: or hass: will yield a rendered icon.                                                                                               | map_state:\u003cbr /\u003e home: mdi:home-account\u003cbr /\u003e not_home: mdi:walk                                                                                 |\n| entities[].attribute | _string_             | Display an attribute instead of the state                                                                                                                                                                   |                                                                                                                                                  |\n| entities[].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. |                                                                                                                                                  |\n| entities[].when      | _string_ or _object_ | Only display this entity when these tests pass                                                                                                                                                              | See separate section                                                                                                                             |\n| entities[].image     | _bool_               | Force display the value as a rounded image                                                                                                                                                                  | Will use the provided value as a background for the `\u003cstate-badge\u003e` component from HA                                                            |\n| entities[].action    | _object_             | Specify a service to be called on tap. Will result in either an icon (if a valid icon is set as value with map_state) or a button with the state value as text                                              | See separate section                                                                                                                             |\n\n### heading\n\nPreviously headings only allowed strings and icons were a hack using unicode emojis.\n**From 0.10.0** you can however render icons from the mdi/hass icon sets:\n\n```yaml\ntype: custom:banner-card\nheading:\n  - mdi:shower\n  - Bathroom\n```\n\nUsing the alternate YAML form for arrays might be more/less readable depending on your preference:\n\n```yaml\ntype: custom:banner-card\nheading: [mdi:shower, Bathroom]\n```\n\nYou can combine as many texts and icons as you like this way.\n\n```yaml\ntype: custom:banner-card\nheading: [mdi:shower, Bathroom, mdi:paper-roll]\n```\n\n### map_state\n\nYou 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` and so on, or a shorthand string that maps to `value`.\nBoth forms in an example:\n\n```yaml\nentity: media_player.office\nmap_state:\n  playing: mdi:disc-player\n  not_playing:\n    value: mdi:stop\n    name: A custom entity heading\n```\n\n## Using when\n\nYou can filter entities with a simple but powerful `when` object. This allows you to filter based on state and/or attributes. It is probably simpliest explained through a few examples\n\nThis 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.\n\n```yaml\nentity: media_player.office\nwhen: playing\n```\n\nThis example limits to only showing a light entity when its on and above a certain brightness\n\n```yaml\nentity: light.my_light\nwhen:\n  state: \"on\"\n  attributes:\n    brightness: [\"\u003e\", 50]\n```\n\nThe 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:\n\n### When operators\n\n| Operator | Description                                                                                                                                                                                           | Example                                  |\n| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |\n| `=`      | **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']`              |\n| !=       | **Not equal** check that is exactly like the equal check, just negated (opposite results)                                                                                                             | `fan_mode: ['!=', 'On Low', 'Auto Low']` |\n| \u003e        | **Bigger than** checks if real value is bigger than what is set. Does not support multiple values                                                                                                     | `brightness: ['\u003e', 50]`                  |\n| \u003c        | **Smaller than** checks if real value is smaller than what is set. Does not support multiple values                                                                                                   | `brightness: ['\u003c', 50]`                  |\n\n## Using entity action\n\nYou can add **simple** buttons by specifying the action property for an entity. This is intended for simple use cases to start scripts or set a light to specific brightness for example. You can enforce a fixed icon using a crazy hack (and there I made it a feature) that sets an entities value via config. (Its normaly read from state). You can also use `map_state` to use different icons for different states.\n\n```yaml\nentity: light.my_light\nname: Reading light\nvalue: mdi:book-open-page-variant\naction:\n  service: light.turn_on\n  brightness: 50\n```\n\n## CSS vars for theming\n\nPlease see the [official docs on theming](https://www.home-assistant.io/components/frontend/#defining-themes) or [check out a tutorial like this one](https://www.juanmtech.com/themes-in-home-assistant/)\nThe card uses the following CSS variables:\n\n| Var name                          | Default value             | Usage                                                                         |\n| --------------------------------- | ------------------------- | ----------------------------------------------------------------------------- |\n| --banner-card-error-color         | var(--lumo-error-color)   | Background color when there's an error crashing the card                      |\n| --banner-card-heading-size        | 3em                       | The main heading of the card                                                  |\n| --banner-card-entity-value-size   | 1.5em                     | Entity value font size                                                        |\n| --banner-card-media-title-size    | 0.9em                     | Media player fonts title font size                                            |\n| --banner-card-button-size         | 32px                      | Size of buttons                                                               |\n| --banner-card-spacing             | 4px                       | Base unit for spacing. Used in multiples many places                          |\n| --banner-card-heading-color-dark  | var(--primary-text-color) | The card measures your bg color to figure out to use dark or light text color |\n| --banner-card-heading-color-light | #fff                      | The card measures your bg color to figure out to use dark or light text color |\n\n## Examples\n\n_Using map_state to render a switch as a colored icon_\n\n```yaml\n- entity: switch.switch\n  name: Is it on?\n  domain: sensor\n  value: mdi:star\n  color: black\n  map_state:\n    \"on\":\n      color: yellow\n```\n\n_Use a background image instead of a color_\n\n```yaml\ntype: custom:banner-card\nbackground: 'url(\"https://source.unsplash.com/random/500x300\")'\nheading: Image bacground\n```\n\n_Basic examples_\n\n```yaml\ntype: custom:banner-card\nbackground: \"#EDE7B0\"\nheading: \"\\U0001F6CB Living room\"\nlink: /lovelace/living_room\nentities:\n  - light.fibaro_system_fgd212_dimmer_2_level\n  - light.fibaro_system_fgd212_dimmer_2_level_3\n  - sensor.aeotec_zw100_multisensor_6_temperature_6\n  - entity: sensor.aeotec_zw100_multisensor_6_luminance_6\n    name: Lux\n  - entity: cover.fibaro_system_fgrm222_roller_shutter_controller_2_level\n    name: Roller shutter\n```\n\n```yaml\ntype: custom:banner-card\nheading:\n  - mdi:shower\n  - Bathroom\nbackground: \"#B0C2ED\"\nlink: /lovelace/bathroom\nentities:\n  - entity: light.fibaro_system_fgd212_dimmer_2_level_11\n    name: Light\n  - entity: sensor.aeotec_zw100_multisensor_6_temperature_5\n    name: Temperature\n  - entity: sensor.aeotec_zw100_multisensor_6_relative_humidity_5\n    name: Humidity\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnervetattoo%2Fbanner-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnervetattoo%2Fbanner-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnervetattoo%2Fbanner-card/lists"}