🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

Styling ‘custom:multiple-entity-row’

Intro:
Let’s call the “left” entity as the “main entity” (for which we may display a state on the last right column), all right entities - “secondary entities”.
For secondary entities you may use a “styles” option (no card-mod required) to set a color and some other CSS properties:

    entities:
      - entity: sensor.xxxxxxx
        styles:  ### styling a “state” string
          width: 80px
          text-align: left
          color: red

or

        styles:
          --paper-item-icon-color: red  ### styling an icon

or

        styles:
          --secondary-text-color: red  ### styling a header

Same approach may be used to style the main entity’s state – except changing the main icon.
Using the “styles” option is a good choice if styles (colors etc) are static. If they are dynamic (depend on some conditions) then you should either place the whole row inside config-template-card (supports JS) or use card-mod (supports jinjia2).

---

Colored whole text:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      :host {
        color: magenta;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: 'mdi:link'
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored row
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Note: the last cyan icon is colored by using "multiple-entity-row::styles" property (not by 'card-mod').

Colored title:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: orange;
          }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored title
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored state & header:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.cleargrass_1_co2
    style: |
      .state.entity {
        color: magenta;
      }
      .state.entity span {
        color: cyan;
      }
    entities:
      - entity: sun.sun
    name: Colored state
    show_state: true
    state_header: CO2

Colored headers (one color):

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      .entity span {
        color: red;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored headers
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored headers (different colors):

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      .entities-row div.entity:nth-child(1) span {
        color: red;
      }
      .entities-row div.entity:nth-child(3) span {
        color: green;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored headers
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored values (one color):

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      .entity {
        color: magenta;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored values
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored values (different colors):

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    style: |
      .entities-row div.entity:nth-child(1)  {
        color: orange;
      }
      .entities-row div.entity:nth-child(3)  {
        color: magenta;
      }
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored values
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Changing a color for 'secondary_info' for some row:

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer .secondary ha-relative-time {
            color: red !important;
          }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

If secondary_info is not some relative time:
post

Changing a color of 'secondary_info' for all rows:

type: entities
style:
  multiple-entity-row:
    $:
      hui-generic-entity-row:
        $: |
          .info.pointer .secondary ha-relative-time {
            color: green !important;
          }
entities:
  - type: custom:multiple-entity-row
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed
  - type: 'custom:multiple-entity-row'
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Different colors for title & "secondary_info":

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer .secondary ha-relative-time {
            color: red !important;
          }
          .info.pointer {
            color: orange;
          }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Colored secondary_info
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored icons (one color for all icons):

Note that the last icon’s color is managed by 'multiple-entity-row::styles' property.

type: entities
entities:
  - type: custom:multiple-entity-row
    style: |
      :host {
        --paper-item-icon-color: red;
      }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        styles:
          --paper-item-icon-color: cyan
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored icons (except one)
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored 1st icon:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.yandex_time_home_person_ildar
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            color: orange;
          }
    entities:
      - entity: sensor.yandex_time_home_person_ildar
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.yandex_time_home_person_ildar
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored 1st icon
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored secondary icons:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.yandex_time_home_person_ildar
    card_mod:
      style:
        hui-generic-entity-row: |
          state-badge {
            color: green;
          }
    entities:
      - entity: sensor.yandex_time_home_person_ildar
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.yandex_time_home_person_ildar
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored secondary icons
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Colored all icons (different colors):

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.yandex_time_home_person_ildar
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            color: orange;
          }
        .: |
          div.entity:nth-child(2) state-badge {
            color: green;
          }
          div.entity:nth-child(4) state-badge {
            color: red;
          }
    entities:
      - entity: sensor.yandex_time_home_person_ildar
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.yandex_time_home_person_ildar
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
    name: Colored all icons
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Wrapped text:

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: red;
            text-overflow: unset !important;
            white-space: unset !important;
          }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
        unit: ''
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
        unit: ''
        styles:
          width: 60px
          text-align: center
      - entity: sensor.empty_value
        name: false
        unit: false
        icon: mdi:link
        tap_action:
          action: url
          url_path: xxxcc
        styles:
          --paper-item-icon-color: cyan
    name: Wrapped Wrapped Wrapped Wrapped Wrapped
    unit: ''
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed

Rotated icons:

type: vertical-stack
title: Rotate
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.yandex_time_home_person_ildar
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                color: orange;
                transform: rotate(-45deg);
              }
            .: |
              div.entity:nth-child(2) state-badge {
                color: green;
                transform: rotate(180deg);
              }
              div.entity:nth-child(4) state-badge {
                color: red;
                transform: rotate(45deg);
              }
        entities:
          - entity: sensor.yandex_time_home_person_ildar
            attribute: jamsrate
            name: пробки
            unit: ''
          - entity: sensor.service_empty_value
            name: false
            unit: false
            icon: mdi:car
          - entity: sensor.yandex_time_home_person_ildar
            name: на дорогу
            unit: ''
            styles:
              width: 60px
              text-align: center
          - entity: sensor.service_empty_value
            name: false
            unit: false
            icon: mdi:car
            tap_action:
              action: url
              url_path: xxxcc
        name: Rotated icons
        unit: ''
        icon: mdi:car
        toggle: false
        show_state: false
        state_header: ''
        secondary_info: last-changed

Changed font-size:

type: vertical-stack
title: font-size
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host {
            font-size: 8px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Whole row (except headers)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row:
            $: |
              .info.pointer {
                font-size: 8px;
              }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Title (incl. secondary_info)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          .entity span {
            font-size: 18px
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Headers
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          .entities-row div.entity:nth-child(1) span {
            font-size: 7px;
          }
          .entities-row div.entity:nth-child(3) span {
            font-size: 17px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Headers (different)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          .entity {
            font-size: 7px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Values
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          .entities-row div.entity:nth-child(1)  {
            font-size: 7px;
          }
          .entities-row div.entity:nth-child(3)  {
            font-size: 17px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Values (different)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        style:
          hui-generic-entity-row $:
            .info.pointer .secondary: |
              ha-relative-time {
                font-size: 20px;
              }
        entity: sensor.time_home
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Secondary_info
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed

Resizing icons:

type: vertical-stack
title: Resizing icon
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style: |
          :host {
            --mdc-icon-size: 40px;
          }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: All icons
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row $: |
            state-badge {
              --mdc-icon-size: 40px;
            }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Main icon
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row: |
            state-badge {
              --mdc-icon-size: 40px !important;
            }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Seconary icons
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sensor.time_home
        style:
          hui-generic-entity-row: |
            div.entity:nth-child(2) state-badge {
              --mdc-icon-size: 40px;
            }
            div.entity:nth-child(4) state-badge {
              --mdc-icon-size: 10px;
            }
        entities:
          - entity: sensor.time_home
            attribute: jamsrate
            name: пробки
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:car
          - entity: sensor.time_home
            name: на дорогу
          - entity: sensor.service_empty_value
            name: false
            icon: mdi:link
        name: Seconary icons (different)
        icon: mdi:account
        show_state: false
        state_header: ''
        secondary_info: last-changed

Hidden main icon:

type: entities
entities:
  - type: custom:multiple-entity-row
    style:
      hui-generic-entity-row $: |
        state-badge {
          display: none;
        }
    entity: sensor.time_home
    entities:
      - entity: sensor.time_home
        attribute: jamsrate
        name: пробки
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:car
      - entity: sensor.time_home
        name: на дорогу
      - entity: sensor.service_empty_value
        name: false
        unit: false
        icon: mdi:link
    name: Hidden main icon
    icon: mdi:account
    show_state: false

Info below the row (for example, for headers):

Note: states() & any other jinjia2 stuff may be used for content value.

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    name: Temperatures
    tap_action: none
    show_state: false
    entities:
      - entity: sensor.cleargrass_1_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.cleargrass_2_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.cleargrass_1_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.cleargrass_2_temp
        name: false
        styles:
          width: 50px
          text-align: left;
      - entity: sensor.non_existant
    card_mod:
      style: |
        hui-generic-entity-row .entities-row div.entity:nth-child(1) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A kitchen";
          white-space: pre;
        }
        hui-generic-entity-row .entities-row div.entity:nth-child(2) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A hall";
          white-space: pre;
        }
        hui-generic-entity-row .entities-row div.entity:nth-child(3) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A bedroom";
          white-space: pre;
        }
        hui-generic-entity-row .entities-row div.entity:nth-child(4) div::after
        {
          color: var(--secondary-text-color);
          font-size: 0.7rem;
          content: "\A balcony";
          white-space: pre;
        }

Small note for the main entity:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sun.sun
    show_state: false
    secondary_info: last-changed
    entities:
      - entity: sun.sun
      - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info.pointer .secondary::before {
              content: "{{ 'hello\A ' }}";
              color: red;
              white-space: pre;
          }

Move headers to the bottom:
post

Replacing a value, math operations:
post

---

More examples here.

[sparkydave (🇦🇺 Dave)]

@KTibow

consider making a PR in GitHub to add this documentation.

+1 for this. Extensive examples like this is what we need for a lot of the more complex customisations and cards.

[Ildar_Gabdullin]

Styling 'custom:fold-entity-row':

Colored text:

      - type: entities
        entities:
          - type: custom:fold-entity-row
            head:
              entity: sun.sun
              name: individual (:host)
              card_mod:
                style: |
                  :host {
                    color: red;
                  }
            padding: 15
            open: true
            entities:
              - entity: sun.sun
                name: individual (:host)
                card_mod:
                  style: |
                    :host {
                      color: lightgreen;
                    }
              - entity: sun.sun
              - entity: sun.sun

      - type: entities
        entities:
          - type: custom:fold-entity-row
            card_mod:
              style: |
                :host {
                  color: red;
                }
            head:
              entity: sun.sun
              name: common (:host, card level)
            padding: 15
            open: true
            entities:
              - entity: sun.sun
                name: individual (:host)
                card_mod:
                  style: |
                    :host {
                      color: lightgreen;
                    }
              - entity: sun.sun
                name: common (:host, card level)
              - entity: sun.sun
                name: common (:host, card level)

      - type: entities
        entities:
          - type: custom:fold-entity-row
            head:
              entity: sun.sun
              name: individual (DOM)
              card_mod:
                style:
                  hui-generic-entity-row $: |
                    .info {
                      color: red;
                    }
            padding: 15
            open: true
            entities:
              - entity: sun.sun
                name: individual (DOM)
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      .info {
                        color: cyan;
                      }
              - entity: sun.sun

      - type: entities
        entities:
          - type: custom:fold-entity-row
            card_mod:
              style:
                div#head :first-child $ hui-generic-entity-row $: |
                  .info {
                    color: red;
                  }
                div#items div:not(#measure):
                  ':first-child $ hui-generic-entity-row $': |
                    .info {
                      color: cyan;
                    }
            head:
              entity: sun.sun
              name: individual (DOM, card level, for head)
            padding: 15
            open: true
            entities:
              - entity: sun.sun
                name: common (DOM, card level, for items)
              - entity: zone.home
                name: common (DOM, card level, for items)
              - entity: sensor.processor_use
                name: individual color (DOM)
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      .info {
                        color: magenta !important;
                      }
              - entity: input_boolean.test_boolean
                name: common (DOM, card level, for items)

---

Colored chevron button:

type: entities
entities:
  - type: 'custom:fold-entity-row'
    card_mod:
      style: |
        div#head ha-icon {
          color: red;
        }
    head:
      entity: sun.sun
      name: colored button
    padding: 15
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

---

Chevron button with a border:

type: entities
title: chevron with border
entities:
  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#head ha-icon {
          border: 1px solid var(--paper-item-icon-color);
        }
    head:
      type: section
      label: More data
    padding: 15
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

---

How to remove a chevron button for a clickable header:
Usually the items are shown by pressing the chevron button.
If the "clickable: true" property is set, then the items may be displayed by clicking on the header.
Then you can remove the chevron button:

      - type: entities
        entities:
          - sun.sun
          - type: custom:fold-entity-row
            head:
              entity: sun.sun
              card_mod:
                style: |
                  :host {
                    font-weight: bold;
                  }
              tap_action:
                action: fire-dom-event
                fold_row: true
            padding: 15
            open: true
            entities:
              - entity: sun.sun
              - entity: sun.sun
            card_mod:
              style: |
                div#head ha-icon {
                  display: none;
                }
                div#head :first-child {
                  max-width: unset;
                }

---

More examples are described here.

[Ildar_Gabdullin]

It will be great if these examples help beginners to learn.

---

Update:

Animation for Entities card:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

Blinking title:
Note: a margin for the 1st row has to be increased.

type: entities
title: Blinking title
icon: mdi:car
entities:
  - entity: sun.sun
  - sun.sun
card_mod:
  style:
    div:nth-child(1):
      hui-simple-entity-row:
        $: |
          hui-generic-entity-row {
            margin-top: 10px;
          }
    .: |
      .card-header {
        background-color: red;
        color: white;
        animation: blinking 2s linear alternate infinite;
      }
      @keyframes blinking {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }

Whole card blinking:

type: entities
title: Common style
icon: mdi:car
entities:
  - entity: sensor.cleargrass_1_co2
    name: Common style
  - entity: sensor.cleargrass_1_temperature
    name: Common style
card_mod:
  style: |
    ha-card {
      color: red;
      animation: blinking 2s linear alternate infinite;
    }      
    @keyframes blinking {
      0% {opacity: 0;}
      100% {opacity: 1;}
    }

Blinking rows:

type: entities
title: Common style
icon: mdi:car
entities:
  - entity: sensor.cleargrass_1_co2
    name: Common style
  - entity: sensor.cleargrass_1_temperature
    name: Common style
card_mod:
  style: |
    .card-content {
      color: red;
      animation: blinking 0.5s linear alternate infinite;
    }      
    @keyframes blinking {
      0% {opacity: 1;}
      100% {opacity: 0;}
    }

Different elements blinking:

type: entities
title: Common style
icon: mdi:car
entities:
  - sun.sun
  - sensor.cleargrass_1_co2
  - sun.sun
card_mod:
  style:
    hui-simple-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: orange;
              animation: blinking 2s linear alternate infinite;
            }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
            .text-content:not(.info) {
              color: red;
              animation: blinking 2s linear alternate infinite;
            }      
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
    hui-sensor-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info.pointer.text-content {
              color: magenta;
              animation: blinking 2s linear alternate infinite;
            }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
    .card-header:
      .name .icon:
        $: |
          ha-svg-icon {
            color: green;
            animation: blinking 2s linear alternate infinite;
          }
          @keyframes blinking {
            0% {opacity: 0;}
            100% {opacity: 1;}
          }
      .: |
        .name {
          color: cyan;
          animation: blinking 2s linear alternate infinite;
        }
        @keyframes blinking {
          0% {opacity: 1;}
          100% {opacity: 0;}
        }

Blinking for rows’ elements, individual style:

type: entities
title: Individual style
icon: mdi:car
entities:
  - entity: sun.sun
    name: Individual style
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: green !important;
              animation:  blink 2s linear alternate infinite;
            }      
            @keyframes blink {
              0% {opacity: 1;}
              100% {opacity: 0;}
            }
            .text-content:not(.info) {
              color: red;
              animation: blinking 2s linear alternate infinite;
            }      
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
  - entity: sensor.cleargrass_1_co2
    name: Individual style
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: red !important;
              animation:  blink 2s linear alternate infinite;
            }      
            @keyframes blink {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }
            .info.pointer.text-content {
              color: magenta;
              animation: blinking 4s linear alternate infinite;
            }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }

Animations for icons:

type: entities
entities:
  - entity: sun.sun
    name: rotating
    icon: 'mdi:fan'
    style:
      hui-generic-entity-row:
        $: |
          state-badge  {
            color: orange;
            animation: rotation 0.5s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
  - entity: sun.sun
    name: swinging
    icon: 'mdi:bell'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            color: red;
            animation: wobbling 1s linear infinite alternate;
          }
          @keyframes wobbling {
            0% {
              transform: rotate(-45deg);
            }
            100% {
              transform: rotate(+45deg);
            }
          }
  - entity: sun.sun
    name: coloring
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: coloring 8s linear infinite alternate;
          }
          @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }
  - entity: sun.sun
    name: resizing
    icon: 'mdi:radio-tower'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: resizing 1s linear infinite alternate;
          }
          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }
            25% {
              --mdc-icon-size: 15px;
            }
            50% {
              --mdc-icon-size: 20px;
            }
            75% {
              --mdc-icon-size: 26px;
            }
            100% {
              --mdc-icon-size: 32px;
            }
          }
  - entity: sun.sun
    name: stretching 1
    icon: 'mdi:bus-side'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: stretching 1s linear infinite alternate;
          }
          @keyframes stretching {
            0% {
              transform: scaleX(0.5);
            }
            100% {
              transform: scaleX(2.0);
            }
          }
  - entity: sun.sun
    name: stretching 2
    icon: 'mdi:human-handsup'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: stretching 1s linear infinite alternate;
          }
          @keyframes stretching {
            0% {
              transform: scaleY(0.5);
            }
            100% {
              transform: scaleY(2.0);
            }
          }
  - entity: sun.sun
    name: flipping
    icon: 'mdi:timer-sand'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: flipping 1s linear infinite;
          }
          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }
            100% {
              transform: rotateX(360deg);
            }
          }
  - entity: sun.sun
    name: shifting
    icon: 'mdi:arrow-left-right'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: shifting 1s linear infinite alternate;
          }
          @keyframes shifting {
            0% {
              transform: translate(-5px,0);
            }
            100% {
              transform: translate(5px,0);
            }
          }
  - entity: sun.sun
    name: jumping
    icon: 'mdi:arrow-up-down'
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: jumping 1s linear infinite alternate;
          }
          @keyframes jumping {
            0% {
              transform: translate(0,-5px);
            }
            100% {
              transform: translate(0,5px);
            }
          }
  - entity: sun.sun
    name: blinking
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            animation: disappear 1s linear infinite alternate;
          }
          @keyframes disappear {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }

If you need a conditional animation - see these examples for rotation:
a) rotation ON/OFF:

          state-badge  {
            color: orange;
            {% if ..... %}
            animation: rotation 0.5s linear infinite;
            {% endif %}
          }

b) various speed:

          state-badge  {
            color: orange;
            {% set SPEED = .... %}
            animation: rotation {{SPEED}}s linear infinite;
          }

Update (20.05.22):

1. This animation does not work on iOS 15.4.1, iOS 12.5.5 & MacOS:

          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }

Use this variants instead:

  - entity: sun.sun
    name: resizing (height, width)
    icon: mdi:radio-tower
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            animation: resizing 1s linear infinite alternate;
          }
          @keyframes resizing {
            0% {
              height: 10px;
              width: 10px;
            }
            25% {
              height: 15px;
              width: 15px;
            }
            50% {
              height: 20px;
              width: 20px;
            }
            75% {
              height: 26px;
              width: 26px;
            }
            100% {
              height: 32px;
              width: 32px;
            }
          }
  - entity: sun.sun
    name: resizing (scale)
    icon: mdi:radio-tower
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            animation: resizing 1s linear infinite alternate;
          }
          @keyframes resizing {
            0% {
              transform: scale(0.3,0.3);
            }
            25% {
              transform: scale(0.7,0.7);
            }
            50% {
              transform: scale(1,1);
            }
            75% {
              transform: scale(1.15,1.15);
            }
            100% {
              transform: scale(1.3,1.3);
            }
          }

Animation using custom properties is promised to be added in Safari 16.

2. This animation glitches on iOS 15.4.1, iOS 12.5.5 & MacOS (glitches affecting a whole card):

          @keyframes flipping {
            0% {
              transform: rotateX(0deg);
            }

No solution for this so far.
The animation may work OK but also may cause glitches. This is Apple, sorry.

Update 18.04.23: flipping is OK on iOS 15.7.3 (Companion App)

---

More examples are described here.

[wraith1385]

Hello,

I’m trying to change the size of the text on a light card and I apparently don’t understand enough css to do it. Below is what I have and I’ve tried multiple variants, but I can’t seem to get it to work.

type: light
entity: light.kitchen_lights
style: |
ha-card {
--name-font-size: 10px;
}

[Ildar_Gabdullin]

How to change a font-size for Entities card:

type: entities
title: Size for title
card_mod:
  style: |
    ha-card .card-header {
      font-size: 35px;
      color: red;
    }
entities:
  - entity: sun.sun
    name: Standard size
    secondary_info: last-changed
  - entity: sun.sun
    name: Size for whole row
    secondary_info: last-changed
    card_mod:
      style: |
        :host {
          font-size: 25px;
          color: red;
        }
  - entity: sun.sun
    name: Size for name & secondary_info
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer {
              font-size: 10px;
              color: red;
            }
  - entity: sun.sun
    name: Size for name & secondary_info (different)
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer: |
              .secondary ha-relative-time {
                color: green;
                font-size: 25px;
              }
            .: |
              .info.pointer {
                color: red;
                font-size: 8px;
              }
  - entity: sun.sun
    name: Size for name only
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer: |
              .secondary ha-relative-time {
                color: orange;
                font-size: var(--mdc-typography-body1-font-size, 1rem);
              }
            .: |
              .info.pointer {
                color: red;
                font-size: 8px;
              }
  - entity: sun.sun
    name: Size for value
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row $: |
          .text-content {
            font-size: 10px;
            color: red;
          }
  - entity: sun.sun
    name: "!!!! Size for value (w/o sec_info) !!!!"
    card_mod:
      style:
        hui-generic-entity-row $: |
          .text-content.pointer:not(.info) {
            font-size: 10px;
            color: red;
          }
  - entity: sun.sun
    name: Size for secondary_info
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer .secondary: |
              ha-relative-time {
                font-size: 20px;
                color: green !important;
              }

Note that for setting a “standard” font size I had to use a "font-size: var(--mdc-typography-body1-font-size, 1rem)" in the "Size for name only" case, I do not think it is good (kind of ‘hard coding’), and may be there is a better solution…

Another option for changing the title’s font-size - using a "--ha-card-header-font-size" variable:

type: entities
title: 'Style: title font-size'
entities:
  - entity: sun.sun
style: |
  ha-card {
    --ha-card-header-font-size: 35px;
  }

How to change a font-size for a "button" row:

type: entities
title: Size for button
entities:
  - type: button
    name: Standard size
    tap_action:
      action: call-service
      service: homeassistant.update_entity
      service_data:
        entity_id: sun.sun
  - type: button
    name: Standard size
    tap_action:
      action: call-service
      service: homeassistant.update_entity
      service_data:
        entity_id: sun.sun
    card_mod:
      style: |
        :host {
          --mdc-typography-button-font-size: 20px;
        }

---

More examples are described here.

[KTibow (Kendell R)]

Can you use triple backticks instead of single ones?

[wraith1385]

Sorry, apparently I was not paying close enough attention to that warning that popped up. Here ya go:

type: light
entity: light.kitchen_lights
style: |
  ha-card {
    --name-font-size: 10px;
  }

[wraith1385]

What I’m actually trying to do is shrink everything on the light card so that it is roughly the size of a custom button card, but I’m unsure if I need to do that piecemeal or if it can be done with an overall piece of code.

[Ildar_Gabdullin]

Actually, you can try something like this:

Card-mod - Add css styles to any lovelace card

How to change a font-size for Entities card: [image] type: entities title: Size for title card_mod: style: | ha-card .card-header { font-size: 35px; color: red; } entities: - entity: sun.sun name: Standard size secondary_info: last-changed - entity: sun.sun name: Size for whole row secondary_info: last-changed card_mod: style: | :host { font-size: 25px; color: red; } - entity: sun.sun name: Size for …

Cannot check it with light since I do not have any lights so far.

[KCYeoh (Yeoh)]

Is it possible to adjust the card size with card mod? Just installed the card mod but still trying to figure out how to adjust the card size.

Thanks in advance.

[Ildar_Gabdullin]

Styling "mini-graph-card":

Lovelace: mini graph card

Styling the card with “card-mod”: Changing background color: Note: this style may be used to make a card transparent. [image] type: 'custom:mini-graph-card' entities: - sensor.cleargrass_1_temp show: labels: true card_mod: style: | ha-card { --ha-card-background: rgba(50,50,50,0.2); } Background image: [image] type: 'custom:mini-graph-card' entities: - sensor.cleargrass_1_temp show: labels: true card_mod: style: | ha-card { background-image: url("/local…

[Ildar_Gabdullin]

@KCYeoh

Is it possible to adjust the card size with card mod?

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 300px !important;
  }

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 90px !important;
  }

[henry8866 (henry)]

I have a light card that capable of brightness, but I don’t need the control of brightness, how to hide the big circle that adjust brightness in the light card?

[KTibow (Kendell R)]

If you’ll never use it, I think you can remove it via the customization panel by setting the supported stuff to 0.

[henry8866 (henry)]

Sorry I should be more clear, I mean I don’t adjust the brightness for this light in this card. It is in the first page of lovelace ui that I used it to quickly turn stuff on/off. I also have it configured in another page so I can adjustment brightness over there.

[KTibow (Kendell R)]

round-slider {
  visibility: hidden !important;
}

[henry8866 (henry)]

works great!

[Umbe (Umberto)]

Hi , i am using homekit button , but when i use different cards
if i put :host nothing happens.
i am trying to change the background and increase fonts , but no luck.
Any idea ?

                      - card: 'custom:upcoming-media-card'
                        wider: true
                        higher: true
                        widerSize: 2
                        higherSize: 2
                        noPadding: true
                        cardOptions:
                            entity: sensor.recently_added_movies
                            icon: 'mdi:kodi'
                            name: New movies
                            image_style: fanart   
                          
                        cardStyle: |
                          ha-card {
                              padding: 5px!important;
                              display: flex!important;
                              flex-direction: column!important;
                              background: transparent!important;
                              box-shadow: none!important;
                              border-radius:0!important;
                              background: var( --ha-card-background, #fff0 );
                          }                                
                          .rece_line0_fanart {
                              font-size: 25px;
                          }      

[KTibow (Kendell R)]

Why do you think it’s cardStyle? It’s documented that you use style, not cardStyle.