Man I hope this post is understandable. I am still a newbie and for the life of me I cannot figure out the spacing in order the get the second card when flipped to show two more horizontal stack rows of vents, even if it’s the same exact row just copied and pasted then I can edit it afterwards.
The yaml code for this card is below
type: custom:swipe-card
card_width: 300px
start_card: 1
reset_after: 10
parameters:
effect: cube
grabCursor: true
centeredSlides: true
slidesPerView: auto
coverflowEffect:
rotate: 50
stretch: 0
depth: 100
modifier: 1
slideShadows: true
pagination: null
type: bullets
cards:
- type: vertical-stack
cards:- type: vertical-stack
cards:- type: horizontal-stack
cards:- type: custom:button-card
name: null
state:- value: ‘on’
name: Porch
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Porch
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.porch_light_switch_1
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Coach
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Coach
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.coach_lights_switch_1
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Garage
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Garage
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.garage_light_switch_1
- value: ‘on’
- type: custom:button-card
- type: horizontal-stack
cards:- type: custom:button-card
name: null
state:- value: ‘on’
name: Mudroom
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Mudroom
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.mudroom_light_switch_1
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Trash
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Trash
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.trash_light_switch_1
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Patio
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Patio
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.sonoff_1001041733
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Dinette
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Dinette
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.dinette_light_switch_1
- value: ‘on’
- type: custom:button-card
- type: horizontal-stack
cards:- type: custom:button-card
name: null
state:- value: ‘on’
name: String
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: String
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.string_lights_socket_1
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Gazebo
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Gazebo
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.gazebo_lights_switch_1
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Master
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Master
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 15px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.masterbedlight
- value: ‘on’
- type: custom:button-card
name: null
state:- value: ‘on’
name: Landscape
styles:
icon:
- color: rgb(255,175,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf2.jpg)
- background-size: cover
name:
- color: rgb(225,225,225,100%)
- font: bold 13px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘off’
name: Landscape
styles:
icon:
- color: rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
name:
- color: rgb(255,255,255,80%)
- font: bold 13px arial
- text-shadow: 2px 4px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: switch.landscape_lights_socket_1
- value: ‘on’
- type: custom:button-card
- type: horizontal-stack
- type: horizontal-stack
cards:- type: custom:mushroom-light-card
entity: light.sonoff_livingroomlight
hide_state: true
show_brightness_control: true
collapsible_controls: true
name: Living room light
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.sonoff_livingroomlight - type: custom:mushroom-light-card
entity: light.sonoff_loftlight
name: Loft light
show_brightness_control: true
hide_state: true
collapsible_controls: true
tap_action:
action: call-service
service: light.toggle
service_data: {}
target:
entity_id: light.sonoff_loftlight
- type: custom:mushroom-light-card
- type: vertical-stack
- type: horizontal-stack
cards:- type: custom:button-card
entity: switch.zigbee_power_strip_3_37c16dfe_on_off
name: Jace’s
state:- value: ‘off’
color: green
icon: null
styles:
icon:
- animation:
- blink 1.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(0,255,0,0%)
- animation:
- blink 0.0s linear infinite
name:
- color: rgb(255,255,255,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘on’
color: red
icon: null
styles:
icon:
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(255,0,0,0%)
name:
- color: rgb(225,225,225,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: none
- value: ‘off’
- type: custom:button-card
entity: switch.zigbee_power_strip_1_25af2dfe_on_off_3
name: M - Bed
state:- value: ‘off’
color: green
icon: null
styles:
icon:
- animation:
- blink 1.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(0,255,0,0%)
- animation:
- blink 0.0s linear infinite
name:
- color: rgb(255,255,255,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘on’
color: red
icon: null
styles:
icon:
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(255,0,0,0%)
name:
- color: rgb(225,225,225,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: none
- value: ‘off’
- type: custom:button-card
entity: switch.zigbee_power_strip_1_25af2dfe_on_off_4
name: M - Bath
state:- value: ‘off’
color: green
icon: null
styles:
icon:
- animation:
- blink 1.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(0,255,0,0%)
- animation:
- blink 0.0s linear infinite
name:
- color: rgb(255,255,255,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘on’
color: red
icon: null
styles:
icon:
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(255,0,0,0%)
name:
- color: rgb(225,225,225,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: none
- value: ‘off’
- type: custom:button-card
entity: switch.zigbee_power_strip_1_25af2dfe_on_off_4
name: M - Bath
state:- value: ‘off’
color: green
icon: null
styles:
icon:
- animation:
- blink 1.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(0,255,0,0%)
- animation:
- blink 0.0s linear infinite
name:
- color: rgb(255,255,255,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite - value: ‘on’
color: red
icon: null
styles:
icon:
- animation:
- blink 0.0s linear infinite
card:
- background: url(/local/perf.jpg)
- background-size: cover
- border: 1px solid rgb(255,0,0,0%)
name:
- color: rgb(225,225,225,80%)
- font: bold 20px arial
- text-shadow: 2px 2px 2px rgb(0,0,0,100%)
- animation:
- blink 0.0s linear infinite
tap_action:
action: none
- value: ‘off’
- type: custom:button-card