Is there a way for me to combine these two into one? Currently they both take up so much space.
My lighting is heavily automated. If I change the lights manually an automation will likely change them back. This is completely expected. To solve this I have another card to turn off the automation so that the user can take control of the lights.
I would like to be able to designate an automation in one card like this.
Look into using a grid card or custom card like Layout card using their grid system.
You can control the allotted row space with grid-template-columns:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
Iāve just had two more todo lists corrupt themselves but this process isnāt fixing themā¦ (Iām on HA 2024.3.1)
Giving this a go as it looks like an efficient way to a great looking dashboard. Two main questions at this point:
Is there a way to achieve this with the current implementation?Hi,
Iād like to suggest maybe that the new Section features a collapsible option. So If I have Office Section, Bedroom Section etc, I can collapse Office and hide all grouped entities from the view
Is it possible to create MORE than 4 columns? I need 5 now for my HA dashboardā¦
right now in the new experimental sections we have two type of actions (press or whatever you want to call them).
Tap action (taping or pressing/clicking on the card)
icon tap (taping or pressing/clicking on the icon of the card)
Now this brings the problem of non mouse users (cellphones, tablets etc.), that they have to target with the finger the damn icons to execute the icon tap action.
Now on those devices the two different usual actions are either tap or long tap.
Please consider bringing a 3rd action and that is long press so that users of those devices can press or long press on a card to execute different actions. And also being able to disable the tap on icon card.
That will bring the problem with mouse users not being able to execute the long press action and is only fixable if home assistant is able to recognise the device the user is using it and change accordingly.
Any thoughts?
left one is a switch and right one is an automation. cant combine them and even if you do the automation will run only as long as the light will be on?
i am missing something here
beside that you need better manners i have nothing else to say man.
This is exactly what I need with my dashboard. I can achieve this with a horizontal stack nested inside of a vertical stack, but that kind of goes against using this dashboard since you lose the ability to drag and drop individual tiles at that point.
Got it. As long as a card is available via the UI (with or without yaml) I should be able to use it via the new sections view
Can we have fonts normalized? I donāt like how buttons inside a grid are shown near tiles.
Also glances seems to have a very different padding.
UI should be more normalized overall.
(I do like a lots of things, but you know how users are, only share the bad ones 
)
This new feature for the home assistant is incredible! It makes creating a dream dashboard so effortless. Iām absolutely loving it!
It would be great to have the option to add an icon to the section name. That is all 
Loving the sections layout btw. 
looks nice!
what card for solar generation and grid export do you use?
Would you mind sharing the code for the card effects (drop shadow etc.)?
I am using this basic theme available in HACS
https://github.com/KTibow/lovelace-soft-theme
for extra styling, CARD_MOD is required and also available in HACS
here is the code for the house usage, solar generation, and export card:
type: custom:bar-card
name: Grid Export
tap_action: none
entities:
- entity: sensor.home_usage_minus_solar_above_0
min: 0
max: 3000
height: 66
severity:
- color: transparent
from: 0
to: 3000
icon: mdi:transmission-tower-export
entity_row: true
positions:
icon: inside
indicator: inside
name: inside
value: inside
card_mod:
style: |
bar-card-currentbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164, 195, 210) 5%, rgb(121, 210, 179) 15%, rgb(252, 245, 112) 50%, rgb(240, 128, 48) 90%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
}
bar-card-backgroundbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164,195,210) 5%, rgb(121,210,179) 15%, rgb(252,245,112) 50%, rgb(240,128,48) 90%);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
bar-card-card {
border: none;
padding: auto;
margin-bottom: -25px;
#box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
ha-icon {
{% set power_usage = states('sensor.home_usage_minus_solar_above_0') | int %}
{% if power_usage > 500 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
bar-card-name {
{% set power_usage = states('sensor.home_usage_minus_solar_above_0') | int %}
{% if power_usage > 1000 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
Below is the code for the light card:
type: custom:mushroom-light-card
entity: light.kitchen_led_kitchen_led
use_light_color: true
show_brightness_control: true
collapsible_controls: true
show_color_control: true
show_color_temp_control: true
layout: vertical
icon: mdi:led-strip-variant
name: Kitchen LED
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
border: none !important;
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
background: linear-gradient(to top, rgba{{state_attr(config.entity,'rgb_color') + (0.01,)}}, rgba{{state_attr(config.entity,'rgb_color') + (0.2,)}});
{% endif %}
}
ā¦and more
type: custom:mushroom-template-card
primary: Home
secondary: >-
{{ 'All Doors Closed' if is_state('binary_sensor.doors_group', 'off') else
'Door(s) Open' }}, {{ 'All lights off' if states.light | selectattr('state',
'eq', 'on') | list | count == 0 else (states.light | selectattr('state', 'eq',
'on') | list | count) ~ ' light(s) on' }}
icon: mdi:home
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style: |
ha-card {
{% if states('binary_sensor.doors_group') == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
animation: ping 2s infinite;
{% endif %}
}
ha-state-icon {
{% if states('binary_sensor.doors_group') == 'on' %}
color: rgba(var(--rgb-red), 0.7);
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% endif %}
}
type: custom:mushroom-template-card
primary: Garage
secondary: >-
{{ ('Washing Machine, Running' if states('sensor.washing_plug_power')|float >
5 else 'Washing Machine, Finished') }}
icon: mdi:washing-machine
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style: |
ha-state-icon {
{% if states('sensor.washing_plug_power') |float > 5 %}
animation: wobbling 0.7s linear infinite alternate;
{% endif %}
}
@keyframes wobbling {
0% { transform: rotate(-80deg); }
100% { transform: rotate(40deg); }
}
I hope this helps.
You can āfuseā two cards into one with HACS stack-in-card or vertical-stack-in-card (both offer vertical and horizontal stackingā¦)
Greetings and thank you for your guidance. While I acknowledge the solution youāve proposed, I aim to minimize integrations on my system. Therefore, Iāll maintain the current setup and await future updates on the DragānāDrop dashboard.
The number of columns in a section is user selectable as of 2024.4.