I make these like this:
- type: vertical-stack
cards:
- type: custom:more-info-card
entity: cover.rollerblind_000e
title: "Upper Floor Middle"
card_mod:
style: |
ha-card {
background-color: var(--card-background-color);
border-radius: 12px;
box-shadow: var(--ha-card-box-shadow);
padding: 16px;
}
- type: custom:hui-element
card_type: markdown
content: |
<div class="footer" style="display: flex; justify-content: center; align-items: center; padding-top: 10px;">
<ha-icon icon="mdi:battery" style="width: 24px; height: 24px; margin-right: 5px;"></ha-icon>
<span class="battery-percentage" style="font-weight: bold;">{{ states('sensor.rollerblind_000e_battery') }}%</span>
</div>
card_mod:
style: |
ha-card {
background-color: var(--card-background-color);
border-radius: 12px;
box-shadow: var(--ha-card-box-shadow);
padding: 16px;
}
How do I get all this into one widget instead of a vertical stack? I’d much rather have the battery icon in some corner of a single widget. I love that vertical slider bar, but all I really want in this widget is a name, vertical slider bar like that, and the battery icon with the value. So, I’m open to other widget ideas if you have them.