Howdy! 
I’ve been trying to find a Room Card that I like for a while and always fall back to the minimilist-ui room card however it never seems to work when installing and the integration seems overkill for the use of one card, so I thought I’d try my hand at it with various cards and adjust the layouts with card-mod.
And behold my card…
Yaml:
style:
hui-horizontal-stack-card$: |
#root {
border-radius: 15px;
background-color: var(--card-background-color);
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Office
title_tap_action:
action: none
subtitle_tap_action:
action: none
- type: custom:mushroom-template-card
primary: |2-
{% if is_state('binary_sensor.epl_presence_sensor_zone_1_occupancy', 'on') %}
Occupied
{% else %}
Unoccupied
{% endif %}
secondary: ''
icon: ''
entity: binary_sensor.epl_presence_sensor_zone_1_occupancy
card_mod:
style: |
ha-card {
background-color: transparent !important;
border: none;
}
- type: custom:mushroom-entity-card
entity: switch.light_toms_room
icon: mdi:desk
icon_color: light-blue
primary_info: none
secondary_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 180px;
overflow: hidden;
}
ha-card {
border: none;
transform: translate(-50px, 50px);
}
- square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: light.craft_space_light_light
icon: mdi:wall-sconce-flat
icon_color: cyan
primary_info: none
secondary_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 60px;
}
ha-card {
background-color: transparent !important;
border: none;
transform: translate(5px, 30px);
}
- type: custom:mushroom-entity-card
entity: switch.socket_office_backwall_switch_2
icon: ''
icon_color: accent
primary_info: none
secondary_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 60px;
}
ha-card {
background-color: transparent !important;
border: none;
transform: translate(5px, 30px);
}
- type: custom:mushroom-entity-card
entity: switch.office_x1c
icon: ''
icon_color: lime
primary_info: none
secondary_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 60px;
}
ha-card {
background-color: transparent !important;
border: none;
transform: translate(5px, 30px);
}
- type: custom:mushroom-entity-card
entity: switch.office_resin_printer
icon: ''
icon_color: red
primary_info: none
secondary_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 60px;
}
ha-card {
background-color: transparent !important;
border: none;
transform: translate(5px, 30px);
}
- type: custom:mushroom-entity-card
entity: switch.office_wash_station
icon: ''
icon_color: yellow
primary_info: none
secondary_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 60px;
}
ha-card {
background-color: transparent !important;
border: none;
transform: translate(5px, 30px);
}
- type: custom:mushroom-entity-card
entity: switch.socket_office_wall_switch_2
icon: ''
icon_color: teal
primary_info: none
secondary_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-card: |
:host {
--mush-icon-size: 60px;
}
ha-card {
background-color: transparent !important;
border: none;
transform: translate(5px, 30px);
}
columns: 2
style:
hui-grid-card$: |
#root {
direction: rtl !important;
}
But there are a few issues
-
The Custom:mod-card stops me from using visual editor
-
the overrides needed to get the grid of mushroom entities to work require seperate config for the number of columns.
-
the mushroom shape for the large icon overlaps the border-radius in the bottom left
My main ask is, can I store this config somewhere and set it in the card. If columns = 2 then config2 else 1 
And what other changes could I make to make this more reusable and dynamic