Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
7

Resizing a badge:

Resizing may be done by using a "--ha-label-badge-size" variable.
Note that this does not affect font-size.
image

type: picture-elements
title: ''
card_mod:
  style: |
    ha-card { height: 150px !important; }
elements:
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 10%
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 45%
      '--ha-label-badge-size': 35px
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 80%
      '--ha-label-badge-size': 80px
image: /local/images/white.jpg
1 Like