Hey All,
I currently have 4 fan/light cards that I’d like to combine into one collapsible card. Trying every variation, but keep getting errors. Can someone please help me code/nest this properly?
A nice swiper card configuration instead of a dropdown would be awesome too, but I could never get that working properly either…
HACS Integration = Expander Card for Home Assistant
- type: custom:expander-card
child-margin-top: 0.6em
padding: 0
clear: true
title-card-button-overlay: true
title-card-clickable: true
expanded: true
title-card:
Cards I’d like to combine and collapse with a title:
type: custom:mod-card
card_mod:
style: |
ha-card {
background: var(--ha-card-background,var(--card-background-color,#fff));
box-shadow: var(--ha-card-box-shadow,none);
box-sizing: border-box;
border-radius: var(--ha-card-border-radius,12px);
border-width: var(--ha-card-border-width,1px);
border-style: solid;
border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
color: var(--primary-text-color);
display: block;
transition: all 0.3s ease-out 0s;
position: relative;
padding-bottom: 8px;
margin-bottom: 8px;
}
card:
type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 72px 72px
cards:
- type: custom:button-card
icon: mdi:fan
label: Master Bedroom
show_label: true
show_icon: true
styles:
grid:
- grid-template-areas: "\"i l\""
- grid-template-columns: 12% auto
icon:
- width: 100%
- margin-top: "-2px"
card:
- background: none
- border: 0px
- margin: 0px
label:
- margin-top: "-2px"
- margin-left: 8px
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: auto
- type: custom:mushroom-fan-card
entity: fan.master_bedroom_fan
icon_animation: true
fill_container: false
collapsible_controls: true
hide_state: false
name: " "
icon: mdi:fan
card_mod:
style: |
ha-card {
margin-left: -30px;
border-width: 0px;
background: none;
margin-top: -8px;
}
- type: custom:mushroom-fan-card
entity: light.master_bedroom_fan
icon_animation: false
fill_container: false
collapsible_controls: true
hide_state: false
name: " "
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
margin-left: 8px;
border-width: 0px;
background: none;
margin-top: -8px;
}
type: custom:mod-card
card_mod:
style: |
ha-card {
background: var(--ha-card-background,var(--card-background-color,#fff));
box-shadow: var(--ha-card-box-shadow,none);
box-sizing: border-box;
border-radius: var(--ha-card-border-radius,12px);
border-width: var(--ha-card-border-width,1px);
border-style: solid;
border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
color: var(--primary-text-color);
display: block;
transition: all 0.3s ease-out 0s;
position: relative;
padding-bottom: 8px;
margin-bottom: 8px;
}
card:
type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 72px 72px
cards:
- type: custom:button-card
icon: mdi:fan
label: Kid's Bedroom
show_label: true
show_icon: true
styles:
grid:
- grid-template-areas: "\"i l\""
- grid-template-columns: 12% auto
icon:
- width: 100%
- margin-top: "-2px"
card:
- background: none
- border: 0px
- margin: 0px
label:
- margin-top: "-2px"
- margin-left: 8px
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: auto
- type: custom:mushroom-fan-card
entity: fan.kids_bedroom_fan
icon_animation: true
fill_container: false
collapsible_controls: true
hide_state: false
name: " "
icon: mdi:fan
card_mod:
style: |
ha-card {
margin-left: -30px;
border-width: 0px;
background: none;
margin-top: -8px;
}
- type: custom:mushroom-fan-card
entity: light.kids_bedroom_fan
icon_animation: false
fill_container: false
collapsible_controls: true
hide_state: false
name: " "
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
margin-left: 8px;
border-width: 0px;
background: none;
margin-top: -8px;
}