I’m trying to create a card with 4 icons laid out horizontally. Here’s a mockup of what I’m trying to achieve
And here’s what I’ve managed to achieve so far with custom:layout-card and custom:mushroom-template-card cards, by hiding the backgrounds and shadows for the individual cards.
It seems like I need to ‘wrap’ the 4 horizontal custom:mushroom-template-card cards with a blank custom:mushroom-template-card or something, so that they’re all inside one container card with white background and a drop shadow.
Does anyone have an idea on how I can complete what I’m trying to do?
This is the code I have so far
type: custom:layout-card
layout_type: grid
layout:
grid-template-rows: 25% 25% 25% 25%
grid-template-columns: auto
cards:
- type: custom:mushroom-template-card
entity: script.global_all_lights_off_conditional
icon: mdi:lightbulb-group-off
icon_color: red
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent
}
- type: custom:mushroom-template-card
entity: input_boolean.late_evening
icon: mdi:weather-night
icon_color: purple
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent
}
- type: custom:mushroom-template-card
entity: input_boolean.early_evening
icon: mdi:weather-sunset
icon_color: indigo
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent
}
- type: custom:mushroom-template-card
entity: input_boolean.late_afternoon
icon: mdi:weather-sunset-down
icon_color: deep-orange
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent
}