The way things are setup works just fine. I also know some of these cards take up more space than my screen\HA will allow. I am just looking for proof of concept for one. Would the last one from 16 hours ago work by Liam for messing around with and testing or is the code still not optimal in your view?
The code in the op works fine but as per recommendations the code from 16 hours should be the best solution so far so give that 1 a go 
Different people have different preferences.
Some different solutions are difficult to compare.
But some approaches which were posted here are not optimal. I already explained it here:
Consider a stack with inner stacks/cards (some of them could be graphs). Assume you want to compose some inner element (like a label) dynamically. Then you decide to nest the whole stack into config-template-card (CTC). Then ALL cards will be inside CTC. Since these cards have entities - you will have to declare ALL these entities as “monitored” by CTC. And the graph card will redraw itself on every entity’s change - which will cause flickering. Same about a gauge card inside CTC (if someone decides place it).
A possible correct way - place ONLY the card with dynamic element inside CTC. Or do not use CTC - use other cards supporting templates like a markdown.
That was a most important observation.
Other things - like “card-mod”, “use or not layout-card” - are a matter of personal taste / choice / educational goals.
Call me a HA enthuaist or hobbyist. I am not familiar with scripting in YAML. So for me whatever is easiest and works. But thanks for explanation. Will probably reread this thread a few times some more.
1 Like
There were plenty of similar cases with a floorplan.
This is a picture-elements card with plenty of sub-elements.
And people placed the whole picture-elements card inside CTC and then complained smth like “floorplan constantly flickers”, “a webpage freezes” etc.
Hi…thanks, used your code to create my version … though needed some changes as I have to use :host multiple times as not possible to remove borders otherwise
type: entities
entities:
- type: custom:hui-element
card_type: markdown
content: |
APC --- BX1200 --- {{states('sensor.apc_status')}}
card_mod:
style: |
ha-card {
color: var(--mdc-theme-primary);
border: none;
}
- type: custom:hui-element
card_mod:
style: |
:host {
--stack-card-margin: 50px;
--ha-card-border-radius: 22px;
--ha-card-border-width: 0px;
}
card_type: horizontal-stack
cards:
- type: picture
image: /local/images/devices/aps_ups1.jpg
card_mod:
style: |
ha-card {
width: 150px !important;
height: 100px !important;
}
img {
height: 100px !important;
}
- type: custom:button-card
entity: sensor.apc_battery_runtime
name: Remaining
icon: mdi:battery-high
layout: icon_name_state2nd
show_icon: true
show_state: true
- type: custom:bar-card
columns: 2
entity_row: true
positions:
icon: inside
indicator: 'off'
name: inside
value: inside
entities:
- entity: sensor.apc_battery_charge
name: Battery
icon: mdi:battery-high
unit_of_measurement: '%'
severity:
- from: 0
to: 33
color: red
- from: 34
to: 66
color: orange
- from: 67
to: 100
color: green
- entity: sensor.apc_load
name: Load
icon: mdi:gauge
unit_of_measurement: '%'
severity:
- from: 0
to: 33
color: green
- from: 34
to: 66
color: orange
- from: 67
to: 100
color: red
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
ha-card {
--paper-item-icon-color: var(--primary-text-color);
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 22px; /* Adjust the radius as needed */
}
- type: custom:hui-element
card_type: entities
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
entities:
- entity: sensor.apc_input_voltage
name: Input Voltage
icon: mdi:power-plug
- entity: sensor.apc_battery_voltage
name: Battery Voltage
icon: mdi:battery-charging-high
- type: section
- type: custom:mini-graph-card
name: Battery last 7 days
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
icon: mdi:battery-charging-60
entities:
- entity: sensor.apc_battery_charge
hours_to_show: 168
graph: line
detail: 2
name: 'Battery '
font_size: 80
line_width: 1.5
lower_bound: ~0
show:
extrema: true
icon: true