Here you go:
@tom_l Please could you post the YAML for your System Panel? I’ve been trying to recreate it without much sucsess 
title: Graphs
icon: mdi:chart-line
path: graphs
panel: true
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout: vertical
cards:
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
report_size: 2
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
- type: 'custom:mini-graph-card'
color_thresholds:
- color: '#e45e65'
value: 0
- color: '#e0b400'
value: 60
- color: '#0da035'
value: 80
entities:
- sensor.speedtest_download
group: false
hour24: true
line_width: 3
lower_bound: 0
name: Down
points_per_hour: 4
show:
extrema: true
icon: true
labels: false
name: true
state: true
- type: 'custom:mini-graph-card'
color_thresholds:
- color: '#e45e65'
value: 0
- color: '#e0b400'
value: 60
- color: '#0da035'
value: 80
entities:
- sensor.speedtest_upload
group: false
hour24: true
line_width: 3
lower_bound: 0
name: Up
points_per_hour: 4
show:
extrema: true
icon: true
labels: false
name: true
state: true
- type: 'custom:mini-graph-card'
color_thresholds:
- color: '#e45e65'
value: 0
- color: '#e0b400'
value: 60
- color: '#0da035'
value: 80
entities:
- binary_sensor.google_dns_ping
group: false
hour24: true
line_width: 3
lower_bound: 0
name: Up
points_per_hour: 4
show:
extrema: true
icon: true
labels: false
name: true
state: true
# - type: custom:vertical-stack-in-card
# cards:
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
recurse: false
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
- type: custom:mini-graph-card
show:
icon: false
graph: "bar"
name: Cpu use
entities:
- sensor.processor_use
line_color: "#389638"
color_thresholds:
- value: 50
color: green
- value: 70
color: orange
- value: 80
color: red
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
recurse: false
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
- type: custom:mini-graph-card
name: Disk use
show:
icon: false
graph: hide
entities:
- sensor.disk_use_percent_home
line_color: "#389638"
- type: 'custom:card-modder'
recurse: false
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
# - type: custom:vertical-stack-in-card
# cards:
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
recurse: false
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
- type: custom:mini-graph-card
name: Ram free
show:
icon: false
entities:
- sensor.memory_free
# font_size: 50
line_color: "#389638"
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
recurse: false
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
- type: custom:mini-graph-card
name: Ram use
show:
icon: false
entities:
- sensor.memory_use_percent
# font_size: 50
line_color: "#389638"
- type: vertical-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: 'custom:card-modder'
recurse: false
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
- type: custom:mini-graph-card
name: Temperatures
show:
icon: false
extrema: true
fill: false
entities:
- sensor.hall_temperature
- sensor.bathroom_temperature
- sensor.landing_temperature
- sensor.kitchen_temperature
- sensor.office_temperature
- sensor.bedroom_temperature
line_color: "#389638"
Are you able to point out where I’m going wrong?
If you could post your config it would be a great help 
I’ve changed it a bit today to make room for some more sensors:
But here’s my current System Monitor card (or did you want the config for the whole system view?):
cards:
- cards:
- card:
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 25
- color: '#e45e65'
value: 35
entities:
- sensor.processor_use
group: false
hour24: true
line_width: 2
points_per_hour: 60
show:
extrema: true
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style:
border: solid 2px var(--primary-color)
transform: scale(0.95)
type: 'custom:card-modder'
- card:
color_thresholds:
- color: '#039BE5'
value: -50
- color: '#0da035'
value: 40
- color: '#e0b400'
value: 50
- color: '#e45e65'
value: 60
entities:
- sensor.cpu_temperature
group: false
hour24: true
line_width: 2
points_per_hour: 60
show:
extrema: true
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style:
border: solid 2px var(--primary-color)
transform: scale(0.95)
type: 'custom:card-modder'
type: horizontal-stack
- cards:
- card:
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 60
- color: '#e45e65'
value: 70
entities:
- sensor.memory_use_percent
group: false
hour24: true
line_width: 2
points_per_hour: 6
show:
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style:
border: solid 2px var(--primary-color)
transform: scale(0.95)
type: 'custom:card-modder'
- card:
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 60
- color: '#e45e65'
value: 70
entities:
- sensor.swap_use_percent
group: false
hour24: true
line_width: 2
points_per_hour: 6
show:
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style:
border: solid 2px var(--primary-color)
transform: scale(0.95)
type: 'custom:card-modder'
type: horizontal-stack
- cards:
- card:
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 60
- color: '#e45e65'
value: 70
entities:
- sensor.disk_use_percent
group: false
hour24: true
line_width: 2
points_per_hour: 6
show:
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style:
border: solid 2px var(--primary-color)
transform: scale(0.95)
type: 'custom:card-modder'
- card:
color_thresholds:
- color: '#0da035'
value: -1
- color: '#e0b400'
value: 500
- color: '#e45e65'
value: 1000
entities:
- sensor.database_size
group: false
hour24: true
line_width: 2
points_per_hour: 6
show:
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
style:
border: solid 2px var(--primary-color)
transform: scale(0.95)
type: 'custom:card-modder'
type: horizontal-stack
title: Sysem Monitor
type: 'custom:vertical-stack-in-card'
@tom_I Thanks for sharing, Are you using Yaml mode or are you using the built in editor?
Are you able to share the whole system view please?
I’m using storage mode but I edit in VSCode and paste into manual cards. I can copy the whole view using raw edit. It’s over 700 lines so I’ll use pastebin: https://pastebin.com/abDGcBqv
1 Like
@tom_l Perfect, I’ve dropped that into my config, I was attempting to split out my code into yaml mode, but I’ll go back to the built in editor.
I’ll make the edits to attempt to get this working this evening once I finish work 
Thanks for your help
1 Like
@tom_l Work In progress…
Had to spend some time figuring out Netdata to capture all the stats, now I have more stats than I have time to create dashboards in hassio…
Thanks again for your assistance
1 Like
@tom_l What are you using for stats, as I am finding sending live stats to Hassio is using a lot of RAM often approaching 3GB in a single Chrome tab.
1 Like
Just checked, Firefox uses about 700MB to initially load my system page. Chrome uses about half that. This will continue to climb while the page is open and more data comes in.
You can cut down usage by lowering the hours displayed or points per hour for each graph.
Also note that the latest version of the mini-graph card has some display issues.
Hi @tom_l, I’m facing the exact same probelm with my config (Card background dissappears and there are just snippets of border at the top and bottom).
-> Have you found a solution to this problem ?
Unfortunately not. I’m still rocking borderless cards.
Thanks for your help. I think I’ve found something. It’s been a long time since I’ve dug into css so I can’t explain why, but display: block; is a potential solution.
It’s not pretty but hey, whatever works. Following example on the (messy) UI I’m working on:
Thos are two vertical-stacks-in-card, both in card-modders. First one has a 2px solid red border.
Relevant yaml:
- type: custom:card-modder
style:
margin: 10px
display: block
border: 2px solid red
card:
type: custom:vertical-stack-in-card
cards:
- type: 'custom:card-modder'
card:
type: 'custom:text-divider-row'
text: Salon
style:
font-size: 15px
--secondary-text-color: '#CEE2F7'
Hope this will help someone !
*ps: if anyone can help me getting rid of the margins in my horizontal stacks that’d be sweet 
*
It might help if it was formatted correctly. As it is it’s impossible to tell.
You mean the yaml i posted ? I did not realized it wasn’t formatted properly, I’ll fix that.
Otherwise, I finally managed to get rid of the margins that bothered me ! I’m getting close to something I like now:
Obviously there’s still a lot of work, and I want to make clear that the design’s not mine, I just found a nice picture on google images and tried to replicate it.
1 Like
I have the same result ! my style is bean applied only to the first card …
any update yet? or is this abandoned…
just tried with the latest version Lovelace/cards:
as you can see, only the top card is modded…
- type: custom:card-modder
recurse: false
style:
# background-image: url("/local/weather/meteo_alarm/meteo_alarm.png")
# background-size: auto
--primary-text-color: var(--primary-text-color)
--secondary-text-color: var(--secondary-text-color)
--paper-item-icon-color: var(--primary-text-color)
--paper-card-background-color: rgba(255, 255, 240, 0.3) #ivory
# --paper-item-icon-color: white
border-radius: 6px
color: rgb(7,65,143) #black #'#555B65'
box-shadow: 0px 0px 2px 1px
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
title: Weeralarm
show_header_toggle: false
entities:
- binary_sensor.meteoalarm_brabant
- sensor.weer_alarm
- type: markdown
content: >
<font color= grey> [[ binary_sensor.meteoalarm_brabant.attributes.attribution ]] </font>
- type: conditional
conditions:
- entity: binary_sensor.meteoalarm_brabant
state: 'on'
card:
type: markdown
content: >
# <font color= grey> Weer Alarm Brabant: [[ binary_sensor.meteoalarm_brabant.state ]] </font>
___
**Alarm code**
<font color= [[ sensor.weer_alarm.state ]]> - [[ sensor.weer_alarm.state ]] </font>
<font color= grey> - Level: [[ binary_sensor.meteoalarm_brabant.attributes.awareness_level ]] </font>
<font color= grey> - Type: [[ binary_sensor.meteoalarm_brabant.attributes.awareness_type ]] </font>
<font color= grey> - Severity: [[ binary_sensor.meteoalarm_brabant.attributes.severity ]] </font>
<font color= grey> - Certainty: [[ binary_sensor.meteoalarm_brabant.attributes.certainty ]] </font>
**Headline**
<font color= grey> - [[ binary_sensor.meteoalarm_brabant.attributes.headline ]] </font>
**Event**
<font color= grey> - [[ binary_sensor.meteoalarm_brabant.attributes.event ]] </font>
**Status**
<font color= grey> - [[ binary_sensor.meteoalarm_brabant.attributes.description ]] </font>
- type: picture
image: /local/weather/meteo_alarm/meteo_alarm_banner.jpg
Instead of vertical-stack-in cards I now use entity cards.
This is fine for custom cards, they can be listed just like entities.
However for the core built in cards you have to use the actual card name.
alright, thats good to hear. thanks.
but how do you then have them show as if they’re 1 card? Ive tried stacked entity cards, but didnt really like the view. Maybe you have some other setting to blend them into 1?
Like this:
entities:
- entities:
- entity: input_select.lounge_ac_mode
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: 'custom:hui-entities-card'
- columns: 3
entities:
- entity: sensor.lounge_room_temperature
- entity: sensor.lounge_room_humidity
- entity: sensor.lounge_room_condensation_chance
show_name: false
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: 'custom:hui-glance-card'
- entities:
- entities:
- entity: input_boolean.lounge_ac_am_automation
- entity: input_boolean.lounge_ac_pm_automation
- entity: input_boolean.lounge_ac_workday
- entity: input_datetime.lounge_ac_am_on_time
- entity: input_datetime.lounge_ac_am_off_time
- entity: input_datetime.lounge_ac_pm_on_time
- entity: input_datetime.lounge_ac_pm_off_time
- entity: input_number.lounge_ac_heat_temp_set
- entity: input_number.lounge_ac_cool_temp_set
- entity: input_number.lounge_ac_temp_set_heat
name: AC Heat Set Temp
- entity: input_number.lounge_ac_temp_set_cool
name: AC Cool Set Temp
- entity: binary_sensor.lounge_ac_am_automation_time_active
- entity: binary_sensor.lounge_ac_pm_automation_time_active
- entity: binary_sensor.lounge_ac_heat_required
- entity: binary_sensor.lounge_ac_cool_required
head:
label: Automation
type: section
padding: 0
type: 'custom:fold-entity-row'
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: 'custom:hui-entities-card'
show_header_toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
}
title: Lounge Aircon Control
type: entities
2 Likes