Home

Awesome

Expander Card for HomeAssistant

GitHub tag (latest by date) GitHub all releases GitHub Repo stars

Expander/Collapsible card for HomeAssistant

Please ⭐️ or sponsor this repo if you find it useful.

Demo

Sample gif


Expand button as overlay: Sample lights overlay


You can even nest expanders!

Sample nesting


Clear Background (default theme):

Sample clear router

Options

Graphical config supported

Sample editor

Yaml:

NameTypeDefaultSupported optionsDescription
typestringRequiredcustom:expander-cardType of the card.
titlestringExpander*Title (Not displayed if using Title-Card)
clearbooleanfalsetrue|falseRemove Background
expandedbooleanfalsetrue|falseStart expanded
expand-idstringoptionalstringUnique ID to use for JS LocalStorage. Will save expanded state
button-backgroundstringtransparentcss-colorBackground color of expand button
gapstring0.6emcss-sizegap between child cards
paddingstring1emcss-sizepadding of all card content
child-paddingstring0.5emcss-sizepadding of child cards
title-cardobjectoptionalLovelaceCardConfigReplace Title with card
title-card-paddingstring0pxcss-sizepadding of title-card
title-card-button-overlaybooleanfalsetrue|falseOverlay expand button over title-card
overlay-marginstring2emcss-sizeMargin from top right of expander button (if overlay)
cardsobject[]optionalLovelaceCardConfig[]Child cards to show when expanded

Installation

Hacs

Add this repository via HACS Custom repositories

https://github.com/Alia5/lovelace-expander-card

(How to add Custom Repositories)

Manual

1. Download the card

Install the expander-card card by copying expander-card.js to <config directory>/www/expander-card.js

Bash:

wget https://github.com/Alia5/lovelace-expander-card/releases/download/latest/expander-card.js
mv expander-card.js /config/www/

2. Link the card to your lovelace ui

The manual way:

Link expander-card inside your ui-lovelace.yaml

resources:
  - url: /local/expander-card.js
    type: js

Note on closing the issue tracker

FOSS is broken. People suck

I don't care anymore.