Hi, just came across this card, so far so good, i just have one annoying issue. the swipe card seems to cut off my mushroom cards. see below on the corners. how do i make the swipe card bigger??
type: custom:swipe-card
start_card: 1
parameters:
autoHeight: false
initialSlide: 0
centeredSlides: true
effect: coverflow
loop: false
preventClicksPropagation: true
preventClicks: true
cards:
- type: vertical-stack
cards:
You can try the solutions mentioned in the issue reported, or wait till itās fixed someday: Add a box-shadow to the card Ā· Issue #51 Ā· bramkragten/swipe-card (github.com)
Legend! thanks
Wow this has done so much for my dashboard, thank you!
One issue though, is there a way to āresetā the swipe card after Iāve changed view/tab? Itās annoying to return to the home page, and have all the swipers showing all but the start card.
As a word to those who want to change elements in this card, the fact that itās no longer maintained has a silver lining in that changes you make in swipe-card.js wonāt be overwritten. Obviously the changes will apply to every instance of the card, for better or worse.
Ex: I modified the color of the scrollbar by changing this line:
.swiper-scrollbar-drag {\n height: 100%;\n width: 100%;\n position: relative;\n background: rgba(200, 200, 200, 0.7);\n border-radius: 10px;\n left: 0;\n top: 0;\n}
Edit: clear the cache after reloading resourcesā¦
While I agree with your advice about potentially editing the JavaScript file (and do it myself to make the scrollbar bigger for my fat fingers) to be fair to the developer, the card was updated only 17 days ago.
Ah, thus a bunch of confusion above in the posts back in January.
PSA: donāt use
Instead use the HACS link
Hi, Does anyone know if itās possible to call a service or script in the Swipe-card event?
HI.
Iām having problems with the starting card. Everytime that I refresh the page it goes to the last card that I have inside the slide. This is the yaml code:
type: custom:swipe-card
start_card: 1
parameters:
effect: coverflow
grabCursor: true
centeredSlides: true
slidesPerView: auto
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
cards:
I started to notice issue, not sure if it started with HA 2022.12.0 but I have one swipe-card on my home screen. Regardless if through companion app or web browser, when I open HA, card does not load. When I refresh in webbrowser, it shows up. In companion app - since I cannot refresh - sometimes I select āedit dashboardā and I do see ācardā there - actually blank with EDIT option. I select EDIT, see the config and preview there. When I hit cancel or edit something in it and hit OK, the card loads back
Anyone having the same issues? It worked flawlessly for ages.
Has anyone out a grid card in a swiper card in a vertical stack?, I think it is possible Iām just a YAML idiot. If so please help me out.
hiding the scroll bar does not hide the scroll bar during scrolling?
I have scrollbar set to : hide, and autoplay enabled.
Each time, during the actual scrolling or auto slideshow, the scroll bar appears, then disappears again.
Is there any way to hide it completely?
Hey!
Is it possible to set automatic switching of cards, for example, from 1 to 3 every 10 seconds?
Addon works pefectly, but auto switching would be great 
How can I call a service when I swipe my card?
Hi Guys. Can someone help me with creating a slider for the below image. Iād like 3 swipe cards - downstairs, upstairs and outside.
I have the code for what iāve created BUT I canāt seem to get each ābuttonā for the area on one slider - they all fall into individual sliders and I end up with about 20 slides.
Without your code itās impossible to tell you how to alter your code in order to achieve what you want. There are 10 different ways to code your current dashboard.
Appreciate the reply. Newbie to HA and just want your guys opinion on the best way to create what Iām after. The buttons have been created using mushroom:template-card
Hereās the code for the buttons:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: kitchen
primary: Kitchen
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:silverware-fork-knife
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: utility
primary: Utility
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:washing-machine
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: utility
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
Hereās the code with the swipe slider:
type: custom:swipe-card
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: livingroom
hold_action:
action: toggle
badge_color: white
- type: custom:mushroom-template-card
primary: Snug
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
teal
{% endif %}
When trying to use this layout with the swipe card it puts each button into one slider, so I end up with 6 slides, whereby Iād like the 6 buttons on one slider.
If I understand you correctly, you want to have a slider-card where you can slide between the entire blocks right? So first slide shows the buttons of Downstairs, second slide shows all buttons of Upstairs and third slide shows all buttons of Outside.
Please post the entire code of the screenshot, not just a part of the button. I need to see how you create the entire example, so I can see how you can use swiper-card to achieve what you want and edit your code.
Hey @ASNNetworks - really appreciate the help on this. Iāve only been using HA for a week so trying to get my head around all of this. If you need anything else, just shout.
- theme: neon
title: buttons
path: buttons
type: custom:vertical-layout
badges: []
cards:
- *ref_0
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: livingroom
primary: Living Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: livingroom
hold_action:
action: toggle
badge_color: ''
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: snug
primary: Snug
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
teal
{% endif %}
layout: horizontal
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.1);
color: var(--primary-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: kitchen
primary: Kitchen
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:silverware-fork-knife
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: utility
primary: Utility
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:washing-machine
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: utility
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: diningroom
primary: Dining Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:seat
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: diningroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: hallway
primary: Hallway
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:stairs
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: hallway
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.1);
color: var(--primary-color);
}
- type: custom:mushroom-title-card
view_layout:
grid-area: titleupstairs
title: Upstairs
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: hugoroom
primary: Hugo's Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-double
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: hugoroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: masterroom
primary: Master Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-king
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: masterroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: spareroom
primary: Spare Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-double
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: spareroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: dressingroom
primary: Dressing Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:tshirt-v
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: dressingroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: bathroom
primary: Bathroom
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:bathtub
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: ensuiteroom
primary: En-Suite
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:shower-head
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: ensuite
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-title-card
view_layout:
grid-area: titleoutside
title: Outside
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Garden
secondary: ''
icon: mdi:palm-tree
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: garden
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
primary: Garage
secondary: ''
icon: mdi:garage
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: garage
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
Thanks and donāt worry about it, itās not expected that you have all the know-how within a week, thatās why we have this amazing community forum 
One thing to note: you use card_mod with your horizontal-stack cards. This doesnāt do anything, since card-mod only works with cards that contain a ha-card element. This is also explained in the docus of card_mod:
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g.
conditional,entity_filter,vertical-stack,horizontal-stack,grid.Note, though that those cards often include other cards, which card-mod can work on.
See the manual for each card to see how to specify parameters for the included card(s).
GitHub - thomasloven/lovelace-card-mod: š¹ Add CSS styles to (almost) any lovelace card
Using card_mod styling for cards without ha-card element is done differently (and a little hacky). This is also explained at the bottom of the docs page: GitHub - thomasloven/lovelace-card-mod: š¹ Add CSS styles to (almost) any lovelace card. So if you really want to use it, follow that explanation, or leave it out entirely since it doesnāt do anything right now. I have deleted it to clean up the code.
I have removed the horizontal-stack entirely and replaced it with grid card and used columns: 2 as variable. See here for more info about this card (itās a core HA card): Grid Card - Home Assistant (home-assistant.io)
This automatically creates a grid with 2 cards side by side and then the next 2 under it and so on. So instead of using 3 horizontal-stacks you can just use one grid card. Changing the column variable, changes how many cards are next to each other, before going to the the column under it. So this allows you to change it flexibel to different layouts if you desire, without changing all your code.
So what I basically did is create one swiper card. And in there I created three vertical-stack cards. Each vertical stack consists of a title card and a grid card. So this should give you three slides, with each a block that slides entirely consisting of a title and a grid of buttons.
I canāt test it myself since I donāt use mushroom-cards. Let me know if it works or not.
- theme: neon
title: buttons
path: buttons
type: custom:vertical-layout
badges: []
cards:
- type: 'custom:swipe-card'
parameters:
spaceBetween: 20
pagination:
type: bullets
watchOverflow: true
cards:
- type: vertical-stack
cards:
- *ref_0
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: livingroom
primary: Living Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: livingroom
hold_action:
action: toggle
badge_color: ''
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: snug
primary: Snug
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
teal
{% endif %}
layout: horizontal
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: kitchen
primary: Kitchen
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:silverware-fork-knife
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: utility
primary: Utility
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:washing-machine
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: utility
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: diningroom
primary: Dining Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:seat
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: diningroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: hallway
primary: Hallway
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:stairs
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: hallway
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
view_layout:
grid-area: titleupstairs
title: Upstairs
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: hugoroom
primary: Hugo's Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-double
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: hugoroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: masterroom
primary: Master Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-king
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: masterroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: spareroom
primary: Spare Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-double
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: spareroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: dressingroom
primary: Dressing Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:tshirt-v
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: dressingroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: bathroom
primary: Bathroom
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:bathtub
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: ensuiteroom
primary: En-Suite
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:shower-head
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: ensuite
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
view_layout:
grid-area: titleoutside
title: Outside
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
primary: Garden
secondary: ''
icon: mdi:palm-tree
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: garden
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
primary: Garage
secondary: ''
icon: mdi:garage
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: garage
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
P.S. alternatively you can also delete the custom:mushroom-template-card you use for the titles. You can also set a title with grid card. This would also make the vertical-stack inside each slide redundant, since I only had to add that to make sure each title and grid were stack together.
This would make the code even smaller. But not sure if you like the way the titles look that grid card uses.
- theme: neon
title: buttons
path: buttons
type: custom:vertical-layout
badges: []
cards:
- type: 'custom:swipe-card'
parameters:
spaceBetween: 20
pagination:
type: bullets
watchOverflow: true
cards:
- type: grid
columns: 2
square: false
title: Downstairs
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: livingroom
primary: Living Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: livingroom
hold_action:
action: toggle
badge_color: ''
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: snug
primary: Snug
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: office
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
teal
{% endif %}
layout: horizontal
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: kitchen
primary: Kitchen
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:silverware-fork-knife
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: utility
primary: Utility
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:washing-machine
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: utility
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: diningroom
primary: Dining Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:seat
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: diningroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: hallway
primary: Hallway
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:stairs
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: hallway
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: grid
columns: 2
square: false
title: Upstairs
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: hugoroom
primary: Hugo's Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-double
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: hugoroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: masterroom
primary: Master Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-king
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: masterroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: spareroom
primary: Spare Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:bed-double
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: spareroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: dressingroom
primary: Dressing Room
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c'
icon: mdi:tshirt-v
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: dressingroom
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: bathroom
primary: Bathroom
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:bathtub
tap_action:
action: navigate
navigation_path: bathroom
hold_action:
action: toggle
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
view_layout:
grid-area: ensuiteroom
primary: En-Suite
secondary: '{{ states(''sensor.your_temperature_sensor'') }}Ā°c '
icon: mdi:shower-head
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: ensuite
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: grid
columns: 2
square: false
title: Outside
cards:
- type: custom:mushroom-template-card
primary: Garden
secondary: ''
icon: mdi:palm-tree
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: garden
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
- type: custom:mushroom-template-card
primary: Garage
secondary: ''
icon: mdi:garage
icon_color: |-
white
{% if is_state('light.your_light', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: garage
hold_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}