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

Share your Projects! Dashboards & Frontend
7204

Headings card

Some super useful/useless styles:

heading

code 
type: vertical-stack
cards:
  - type: heading
    icon: mdi:fan
    heading: some long long long long long long title
    heading_style: title
    badges:
      - type: entity
        entity: sun.sun
        icon: mdi:fan
      - type: entity
        entity: fan.kitchen
    card_mod:
      style:
        .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: red;
          }
          state-display {
            color: magenta;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }
        .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: orange;
          }
          state-display {
            color: red;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(359deg);}
            100% {transform: rotate(0);}
          }
        .: |
          ha-card {
            background-color: lightgreen !important;
            border-radius: var(--ha-card-border-radius, 12px);
            border-width: var(--ha-card-border-width, 1px);
            border-style: solid;
          }
          .title > p {
            color: red;
            white-space: break-spaces !important;
          }
          .title ha-icon {
            --icon-primary-color: yellow;
            --mdc-icon-size: 32px;
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }

  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun
8 Likes