philjak / lovelace-expander-card

Expander card for HomeAssistant

Expander Card for HomeAssistant

Expander/Collapsible card for HomeAssistant

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

Demo

---

Expand button as overlay:

---

You can even nest expanders!

---

Clear Background (default theme):

Options

Graphical config supported

Yaml:

Name	Type	Default	Supported options	Description
type	string	Required	custom:expander-card	Type of the card.
title	string	Expander	*	Title (Not displayed if using Title-Card)
clear	boolean	false	true|false	Remove Background
expanded	boolean	false	true|false	Start expanded
button-background	string	transparent	css-color	Background color of expand button
gap	string	0.6em	css-size	gap between child cards
padding	string	1em	css-size	padding of all card content
child-padding	string	0.5em	css-size	padding of child cards
title-card	object	optional	LovelaceCardConfig	Replace Title with card
title-card-padding	string	0px	css-size	padding of title-card
title-card-button-overlay	boolean	false	true|false	Overlay expand button over title-card
overlay-margin	string	2em	css-size	Margin from top right of expander button (if overlay)
cards	object[]	optional	LovelaceCardConfig[]	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.