Check this:
type: vertical-stack
cards:
- type: custom:badge-card
badges:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
card_mod:
style:
badge-card:
$: |
div#badges {
transform: scale(0.5);
color:red;
}
As far as I understood for styling all badges you need to use mod-card.
But for styling some particular badge you do not need it:
type: custom:badge-card
badges:
- entity: sun.sun
- entity: sensor.cleargrass_1_co2
name: CO2
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
color: blue;
background-color: magenta;
}
.badge-container .title {
color: orange;
}
.: |
ha-label-badge {
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
}
Styles for badges are explained here.
How to add a βnormalβ background:
By default the badge card does not have a border & background:
Here is how to add a βnormalβ look:
- type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sun.sun
card_mod:
style: |
ha-card {
background: var(--ha-card-background,var(--card-background-color,#fff));
box-shadow: var(--ha-card-box-shadow, none);
border-radius: var(--ha-card-border-radius, 12px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}
Also, it is possible to add a top/bottom paddings to the card.
More examples are described here.