Banner Card
A customizable, linkable banner card with interactive glances for Home Assistant dashboards.
What is Banner Card?
Banner Card is a custom Lovelace card for Home Assistant that creates a fluffy, linkable banner with interactive glances to spice up home dashboards. It allows users to display a customizable heading, background, and a grid of entity states in a visually appealing, clickable component. The card solves the problem of bland dashboard layouts by providing a flexible, themeable element that combines information and navigation.
Home Assistant users and dashboard designers looking to enhance their Lovelace interface with visually rich, interactive cards. It's ideal for those who want to create customized, aesthetic dashboard views without deep frontend development.
Developers choose Banner Card for its extensive customization options, including icon support, state mapping, conditional entity display, and theming via CSS variables. Its unique selling point is the ability to create cohesive, interactive banner elements that integrate seamlessly with Home Assistant's ecosystem while offering advanced features like entity actions and background images.
Overview
A fluffy banner card for Home Assistant 🥰
Use Cases
Best For
- Creating visually distinct room or area headers in Home Assistant dashboards
- Displaying a grid of sensor states (temperature, humidity, lights) with custom icons
- Adding interactive buttons to control devices (lights, covers) directly from a card
- Building theme-consistent dashboard elements with CSS variable support
- Implementing conditional entity displays based on state or attribute values
- Enhancing dashboard navigation with linkable banner cards to different views
Not Ideal For
- Projects requiring complex, multi-step automations or scripts directly embedded in the card interface
- Users who prefer drag-and-drop, pre-styled cards without YAML configuration work
- Dashboards needing advanced data visualizations like charts, graphs, or real-time plots
Pros & Cons
Pros
Supports arrays of text, MDI/Hass icons, and Unicode emojis for creative banners, as shown in the heading examples with configurations like [mdi:shower, 'Bathroom'].
Enables state mapping to custom icons or text, conditional display using 'when' operators, and simple service calls via entity actions, detailed in the map_state and when sections for tailored feedback.
Uses CSS custom properties like --banner-card-heading-size that align with Home Assistant themes, allowing easy visual consistency across dashboards without custom code.
Offers backgrounds with solid colors, gradients, or images, such as URLs from Unsplash, enhancing aesthetic appeal as demonstrated in the background examples.
Cons
The README warns that from version 0.14, downloading source files directly can cause crashes, requiring careful manual setup or HACS, which adds friction for new users.
Entity actions are described as 'simple' and intended for basic use cases like setting light brightness; advanced interactions may need additional cards or custom scripts, limiting functionality.
Includes hacks and casual language (e.g., 'crazy hack' for icons), which might confuse users unfamiliar with YAML or lead to errors in configuration.
Frequently Asked Questions
Related Projects
Mini Graph CardMinimalistic graph card for Home Assistant Lovelace UI
Button card❇️ Lovelace button-card for home assistant
Vacuum Map CardThis card provides a user-friendly way to fully control map-based vacuums in Home Assistant. Supported brands include Xiaomi (Roborock/Viomi/Dreame/Roidmi/Valetudo/Valetudo RE), Neato, Wyze, Roomba, Ecovacs (and probably more).
Auto-Entities Card🔹Automatically populate the entities-list of lovelace cards
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.