Examples above are shown in the default dark theme however they should work with most themes.
So a couple of my good friends kept seeing my Home Assistant dashboards and asking:
“What card are you using for that? I want to use it on mine.”
However I had custom developed my cards using the absolutely awesome Button Card by @RomRider and I knew they did not have the appetite to be writing Javascript or complex YAML for theirs. So, I made my cards into templates which require as little configuration as possible. Now I’m posting them here to share with you.
They’re not as detailed as Minimalist or as slick as Mushroom Cards (yet) but they are an alternative that can be used with whatever theme you choose.
Try Creative Button Card Templates
Example
View one of my dashboards made with Creative Button Card Templates...
This one has quite a lot going on so it’s a bit busy but it shows you a lot of possibilities. I’m using the excellent Noctis theme, Button Card (obviously), Lovelace Layout Card, Lovelace Card Mod and Mini Graph Card, amongst other more specific custom cards, to make the magic happen.
Templates and Features
-
Designed to work with most themes
-
Least amount of configuration possible
-
Interactive hover effects on desktop browser
-
Pre-defined tap actions support haptic on iOS
-
Reduced size and opacity when entity is unavailable
-
Can be customised with any of the Button Card features
-
Resizable, customisable and extendable with helpful features
-
Compatible with YAML or Storage (UI) Lovelace modes
Title
-
Optional icon
-
Customise Colors
-
Dynamic width
-
Mirror (right-to-left)
Action Button
-
Run any Automation, Script or Timer
-
Shows last run time
-
Animated icon while running
-
Customise icons and names for idle and running
-
Timer shows remaining time
-
Add
timer
for a script which starts a timer and get the best of both
Device
-
Any
entity
which toggles -
Display up to 2
attributes
with custom icons and units of measurement -
Hides attributes when device is off
Smart Plug
-
For Smart Plugs/Sockets with energy monitoring
-
Displays current and voltage attributes while on
Mini Button
-
An icon only button. Put one in a horizontal stack next to your title for example.
-
Add a
symbol
overlay for extra identification
Light
-
Any light
entity
-
Icon color mimics light color
-
Displays Effect name while light is running an effect
-
Displays Brightness percentage
-
Displays color temperature in Kelvin or RGB automatically based on light settings
-
Hides extra information when light is off
Motion-Activated Light
-
All the features of the Light card
-
Shows when motion is or was last activated
Light Group
-
Automagically builds a card of up to 6 lights from any light group
-
OR you can detail a list of up to 6 light items with custom names, icons and symbols for identification
-
Main card operates the group and each light has it’s own embedded mini button
-
Tap actions on the group and each light individually
-
Displays brightness and color information for the group when on
Value Strip
-
Quick control of 5 options for any numeric state/attribute
-
Zero-Config options for
brightness
(lights) andcover
(blinds, curtains, garage doors) -
Display values, icons or both
-
Fade from lowest to highest value
-
Completely customise icons, values and units
Info Card
-
Display up to 4 entities or attributes (great for sensors)
-
Custom icons, colors, units and layouts
-
Decimals (rounding) and currency support
Info Mini
-
Display the icon and state of any entity or attribute
-
Layout value and units as
stack
orinline
-
Customise color, value, units and spin
Addons
-
Easily add to just about any template with some included in certain templates already
-
transparent
- Make the background of any card transparent -
dynamic_icons
- Custom icons foron
,off
orunavailable
states by just specifying in variables -
actions
- Adds tap totoggle
, double tap or hold formore-info
with hapticsuccess
for iOS -
no_actions
- Remove all actions from the template -
resizable
- Resize the card usingheight
andwidth
variables
Advanced Features
-
Debug addon to get relevant info in
console.debug()
-
Entity detail template to see all properties and attributes of an entity
-
There’s a bunch that are a little too complex or more suited to my specific use case for things like Adaptive Lighting. If people want to know them then let me know and I’ll post some details.
They still require the use of YAML, however I’ve tried to reduce the required effort to get excellent results, some only require you to add the type
, template
, and entity
but produce a card with plenty of information and features. Options are set through variables
and are detailed comprehensively in the documentation.
Because they’re new, be prepared for breaking changes in updates (I’ll try to call them out). I can’t promise they will be maintained long-term as I’ve started looking into building my own custom cards with UI configuration which will replace them. However, this will take some time so until then, if you like the templates then please utilise them and your feedback is welcome.
Enjoy and be Creative.
View one of my dashboards made with Creative Button Card Templates...
This one has quite a lot going on so it’s a bit busy but it shows you a lot of possibilities. I’m using the excellent Noctis theme, Button Card (obviously), Lovelace Layout Card, Lovelace Card Mod and Mini Graph Card, amongst other more specific custom cards, to make the magic happen.
Gratitude
A massive thank you to @RomRider and everyone who contributed to Button Card. These templates wouldn’t even be possible without it.