Adaptive Mushroom

[Mattia2399]

Try this.

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: person.mattia
        content_info: none
        use_entity_picture: true
        tap_action:
          action: none
        card_mod:
          style: |

            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 

            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
      - type: entity
        entity: person.giulia
        content_info: none
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Sarah
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.giulia
                    icon_type: entity-picture
        card_mod:
          style: |
            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 
            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
      - type: entity
        entity: person.angela
        content_info: none
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Elijah
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.angela
                    icon_type: entity-picture
        card_mod:
          style: |
            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 
            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
      - type: entity
        entity: person.maurizio
        content_info: none
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Michaela
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.maurizio
                    icon_type: entity-picture
        card_mod:
          style: |
            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 
            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
    alignment: end
    card_mod:
      style: |
        ha-card { 
          /* Overlap avatar Chips */
          --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

          /* Set size of border around Chips */
          --chip-avatar-padding: 2px;

          /* Reduce width to fit Chips & allow max space for weather */
          width: fit-content;
          transition: all 0s;
        }

[mysob]

@Mattia2399

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: person.mattia
        content_info: none
        use_entity_picture: true
        tap_action:
          action: none
        card_mod:
          style: |

            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 

            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
      - type: entity
        entity: person.giulia
        content_info: none
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Sarah
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.giulia
                    icon_type: entity-picture
        card_mod:
          style: |
            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 
            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
      - type: entity
        entity: person.angela
        content_info: none
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Elijah
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.angela
                    icon_type: entity-picture
        card_mod:
          style: |
            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 
            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
      - type: entity
        entity: person.maurizio
        content_info: none
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Michaela
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-person-card
                    entity: person.maurizio
                    icon_type: entity-picture
        card_mod:
          style: |
            /* Color border around avatar to show person status */
            ha-card {
              --chip-background:
              {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
              {% else %}
                rgb(var(--rgb-state-person-zone))
              {% endif %};
            } 
            /* Slightly enlarge & bring to front on hover */
            ha-card:hover {
              transform: scale(1.2);
              transform-origin: top center;
              z-index: 1;
              transition: all 1s;
            }
    alignment: end
    card_mod:
      style: |
        ha-card { 
          /* Overlap avatar Chips */
          --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

          /* Set size of border around Chips */
          --chip-avatar-padding: 2px;

          /* Reduce width to fit Chips & allow max space for weather */
          width: fit-content;
          transition: all 0s;
        }

Could be nice idea, yet I dont have much experience with HA and pop-ups yet. Feel free to update the code though.

[RonOnline (Ron)]

@ArenaCloser Thank you very much for your work!

I use it very much now.

Still WIP offcourse, but I guess that is for most of us with the dashboards

[hiddevanbrussel]

Where do you get the KNMI weather information from?

[RonOnline (Ron)]

You mean the weathercode i guess??

KNMI weeralarm via de Scrape integratie - Huizebruin.nl

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Weer
    card_mod:
      style: |
        ha-card {
          --title-font-size: 16px !important;
        }     
  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.knmi_weercode
            state_not: Groen
        card:
          type: vertical-stack
          cards:
            - type: custom:mushroom-template-card
              primary: 'KNMI weercode : {{ states(''sensor.knmi_weercode'') }}'
              secondary: '{{ states(''sensor.knmi_info'') }}'
              icon: |-
                {% if is_state('sensor.knmi_weercode', 'Groen') %}
                  mdi:alert-circle-check
                {% elif is_state('sensor.knmi_weercode', 'Geel') %}
                  mdi:alert-decagram
                {% else %}
                  mdi:alert
                {% endif %}
              icon_color: |-
                {% if is_state('sensor.knmi_weercode', 'Groen') %}
                 green
                {% endif %}
                {% if is_state('sensor.knmi_weercode', 'Geel') %}
                 red
                {% endif %}
                {% if is_state('sensor.knmi_weercode', 'Oranje') %}
                 red
                {% endif %}
                {% if is_state('sensor.knmi_weercode', 'Rood') %}
                 yellow
                {% endif %}
              hold_action:
                action: url
                url_path: >-
                  https://www.knmi.nl/nederland-nu/weer/waarschuwingen/zuid-holland 
              multiline_secondary: true
              fill_container: false
              tap_action:
                action: url
                url_path: >-
                  https://www.knmi.nl/nederland-nu/weer/waarschuwingen/zuid-holland 
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    font-color: black;
                    {% if is_state('sensor.knmi_weercode', 'Groen') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      background-color: green;
                      opacity: 0.7;
                    {% endif %}
                    {% if is_state('sensor.knmi_weercode', 'Geel') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      font-color: black; 
                      background-color: yellow;
                      opacity: 0.7;
                    {% endif %}
                    {% if is_state('sensor.knmi_weercode', 'Oranje') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      background-color: orange;
                      opacity: 0.7;
                    {% endif %}
                    {% if is_state('sensor.knmi_weercode', 'Rood') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      background-color: red;
                      opacity: 0.7;
                    {% endif %}                  

                  }

[hiddevanbrussel]

@RonOnline

              card_mod:
                style: |
                  ha-card {
                    font-color: black;
                    {% if is_state('sensor.knmi_weercode', 'Groen') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      background-color: green;
                      opacity: 0.7;
                    {% endif %}
                    {% if is_state('sensor.knmi_weercode', 'Geel') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      font-color: black; 
                      background-color: yellow;
                      opacity: 0.7;
                    {% endif %}
                    {% if is_state('sensor.knmi_weercode', 'Oranje') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      background-color: orange;
                      opacity: 0.7;
                    {% endif %}
                    {% if is_state('sensor.knmi_weercode', 'Rood') %}
                        --primary-text-color: blue;
                        --secondary-text-color: black;                    
                      background-color: red;
                      opacity: 0.7;
                    {% endif %}  

[Mattia2399]

what did you use for the cards of the individual entities such as wind, etc?

[RonOnline (Ron)]

I added two cards to the weather now template:

  weather_now_template:
    card:
      type: custom:mushroom-template-card
      primary: 'Nu: {{states(''sensor.ow_hourly_weather'')}}'
      secondary: '[[secondary]]'
      icon: mdi:weather-partly-cloudy
      entity: sensor.ow_hourly_condition
      picture: >-
        {% set entity = states("sensor.ow_hourly_condition") %} {% set cloud =
        states("sensor.ow_hourly_cloud_coverage")|int %}  {% set rain =
        states("sensor.buienalarm_precipitation")|float %}  {% if entity ==
        "exceptional" %}
          {% set slug = "isolated_scattered_tstorms_day" %}
        {% elif entity == "fog" %}
          {% set slug = "haze_fog_dust_smoke" %}
        {% elif entity == "hail" %}
          {% set slug = "wintry_mix_rain_snow" %}
        {% elif entity == "lightning" or entity == "lightning-rainy"%}
          {% set slug = "strong_tstorms" %} 
        {% elif entity == "snowy" %}
          {% set slug = "flurries" %}
        {% elif entity == "snowy-rainy" %}
          {% set slug = "wintry_mix_rain_snow" %}
        {% elif rain > 0 and rain <= 0.5 %}
          {% set slug = "drizzle" %}
        {% elif rain > 0.5 and rain <= 1.5 %}
          {% set slug = "showers_rain" %}
        {% elif rain > 1.5 %}
          {% set slug = "heavy_rain" %}
        {% elif states("sun.sun") == "below_horizon" %} 
          {% if cloud < 20 %}
          {% set slug = "clear_night" %}
          {% elif cloud < 40 %}
          {% set slug = "mostly_clear_night" %}
          {% elif cloud < 60 %}
          {% set slug = "partly_cloudy_night" %}
          {% elif cloud < 80 %}
          {% set slug = "mostly_cloudy_night" %}
          {% elif cloud <= 100 %}
          {% set slug = "cloudy" %}
          {% endif %}
        {% else %}  
          {% if cloud < 20 %}
          {% set slug = "sunny" %}
          {% elif cloud < 40 %}
          {% set slug = "mostly_sunny" %}
          {% elif cloud < 60 %}
          {% set slug = "partly_cloudy" %}
          {% elif cloud < 80 %}
          {% set slug = "mostly_cloudy_day" %}
          {% elif cloud <= 100 %}
          {% set slug = "cloudy" %}
          {% endif %}
        {% endif %}
        https://www.gstatic.com/images/icons/material/apps/weather/2x/{{slug}}_dark_color_96dp.png
      multiline_secondary: false
      icon_color: grey
      tap_action:
        action: navigate
        navigation_path: /dashboard-tablet/weer
      badge_icon: ''
      badge_color: ''
      card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
             --primary-text-color: rgb(240,240,240);
             --secondary-text-color: rgb(220,220,220);
          }
  weather_day_template:
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          layout: vertical
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background: none;
                margin-bottom: -18px;
              }
          primary: ''
          secondary: >
            {% set dict = {'Mon': 'ma', 'Tue': 'di', 'Wed': 'wo', 'Thu': 'do',
            'Fri': 'vr', 'Sat': 'za', 'Sun': 'zo'} %}

            {% set str = as_timestamp(state_attr('weather.buienradar',
            'forecast')[[[index]]].datetime) | timestamp_custom("%a") %}

            {{ dict[str] }}
        - type: custom:mushroom-template-card
          layout: vertical
          entity: weather.buienradar
          tap_action:
            action: more-info
          icon: mdi:weather-partly-cloudy
          picture: >-
            {% set cloud = 100 - states("sensor.buienradar_sunchance_[[day]]d")
            | int %} {% set rain = states("sensor.buienradar_rain_[[day]]d") |
            float %} {% set entity =
            states("sensor.buienradar_detailed_condition_[[day]]d") %} {% if
            entity == "exceptional" %}
              {% set slug = "isolated_scattered_tstorms_day" %}
            {% elif entity == "fog" %}
              {% set slug = "haze_fog_dust_smoke" %}
            {% elif entity == "hail" %}
              {% set slug = "wintry_mix_rain_snow" %}
            {% elif entity == "lightning" or entity == "lightning-rainy"%}
              {% set slug = "strong_tstorms" %} 
            {% elif entity == "snowy" %}
              {% set slug = "flurries" %}
            {% elif entity == "snowy-rainy" %}
              {% set slug = "wintry_mix_rain_snow" %}
            {% elif rain > 0.6 and rain <= 1.5 %}
              {% set slug = "drizzle" %}
            {% elif rain > 1.5 and rain <= 5 %}
              {% set slug = "showers_rain" %}
            {% elif rain > 5 %}
              {% set slug = "heavy_rain" %}
            {% else %}  
              {% if cloud < 20 %}
              {% set slug = "sunny" %}
              {% elif cloud < 40 %}
              {% set slug = "mostly_sunny" %}
              {% elif cloud < 60 %}
              {% set slug = "partly_cloudy" %}
              {% elif cloud < 80 %}
              {% set slug = "mostly_cloudy_day" %}
              {% elif cloud <= 100 %}
              {% set slug = "cloudy" %}
              {% endif %}
            {% endif %}
            https://www.gstatic.com/images/icons/material/apps/weather/2x/{{slug}}_light_color_96dp.png
          primary: '{{states(''sensor.buienradar_temperature_[[day]]d'')}},'
          secondary: '{{states(''sensor.buienradar_minimum_temperature_[[day]]d'')}},'
          multiline_secondary: true
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background: none;
              }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              icon: mdi:navigation-variant
              card_mod:
                style: |
                  ha-card 
                  {
                  --chip-icon-size: var(--chip-icon-size);
                  }
                  ha-card:after {
                    content: "{{ states('sensor.buienradar_wind_force_[[day]]d') }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: var(--icon-color);
                    color: var(--card-background-color);
                    font-weight: bold;
                    border-radius: 50%;
                    top: 12px;
                    right: 14.66px;
                    width: 12px;
                    height: 12px;
                    font-size: 10px; 
                  }
                  .content {
                    transform: rotate({{ states('sensor.buienradar_wind_direction_azimuth_[[day]]d') }}deg);
                  }            
                  }
          alignment: center
        - type: custom:mushroom-template-card
          layout: vertical
          primary: 💦
          secondary: '{{states(''sensor.buienradar_rain_[[day]]d'')}}, mm'
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background: none;
              }

But it works for me with buienradar, so I don’t know if you use that?!

[Mattia2399]

Sorry, I was referring to the card below with the blue circle

[RonOnline (Ron)]

Ow that is an custom card:

  - type: custom:compass-card
    header: false
    language: nl
    indicator_sensors:
      - sensor: sensor.bresser51_wind_direction_sector_adjusted
        indicator:
          type: arrow_inward
    value_sensors:
      - sensor: sensor.bresser51_wind_beaufort

GitHub - tomvanswam/compass-card: A Lovelace card that shows a directional...

[bedar89 (Bedar)]

Are there more updates planned on this? I’m curious how all your pages look like, for inspiration.

[0tto0o]

Still very much a work in progress, but I am liking it very much.

My main screen:

My climate screen (something is wrong with the graphs, have to look into this):

My network screen:

The other two screen are for maintenance and one for settings.

I am still in the process of moving everything I have made in my ‘old’ dashboard to this one, next up are the media pages.

[hiddevanbrussel]

where do you get the information from RPI 4 from? And can you share the code of this card?

[0tto0o]

I got the info by following the steps from this youtube video:
“How To Monitor Home Assistant Performance” by KPeyanski

I copied the design of the card from someone on this website and modified it to my needs. I don’t remember from where, probably from here:

Mushroom Inspiration!

Mushroom topic are now over 8000 post! It`s really hard to get inspiration or code to use with your own dashboard. I would like this post to be all about pictures with codes, nothing else! So if you have something to share or offer, please do it with pictures and code. Do not ask any questions here, instead ask them directly to the person or in the original Mushroom post! To all new user of Mushroom, you will need to download some things from HACS, some example: Card Mod, Stack In …

This is the design code:

type: custom:stack-in-card
title: Raspberry Pi 4 model B
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 18px;
    }
    .card-header {
      padding-top: 1px;
      padding-bottom: 1px;
      color: var(--secondary-text-color);
      font-weight: bold !important;
    }
keep:
  box_shadow: false
  border_radius: true
  margin: true
  outer_padding: true
  background: true
cards:
  - type: vertical-stack
    cards:
      - type: grid
        columns: 2
        square: false
        cards:
          - type: custom:button-card
            name: Power Status
            icon: mdi:lightning-bolt
            entity: binary_sensor.rpi_power_status
            show_icon: true
            show_label: false
            show_name: true
            show_state: true
            state:
              - value: 'off'
                styles:
                  img_cell:
                    - background-color: rgba(77, 163, 100, 0.5)
                  icon:
                    - color: var(--card-background-color)
              - operator: default
                styles:
                  icon:
                    - color: var(--card-background-color)
                  img_cell:
                    - animation: blink 2s ease infinite
                    - opacity: 0.7
                    - background-color: '#bf5e5e'
            styles:
              icon:
                - color: null
              label:
                - justify-self: start
                - align-self: start
                - font-weight: bold
                - font-size: 12px
                - filter: opacity(40%)
                - margin-left: 12px
                - color: ''
              name:
                - align-self: end
                - justify-self: start
                - font-weight: bold
                - font-size: 15px
                - margin-left: 12px
                - color: var(--secondary-text-color)
              state:
                - justify-self: start
                - align-self: start
                - font-weight: bold
                - font-size: 12px
                - filter: opacity(40%)
                - margin-left: 12px
              img_cell:
                - border-radius: 50%
                - place-self: center
                - width: 30px
                - height: 30px
              grid:
                - grid-template-areas: '"i n" "i s" "i l"'
                - grid-template-columns: min-content auto
                - grid-template-rows: min-content min-content
              card:
                - border-radius: 15px
                - box-shadow: null
                - padding: 6px
            size: 60%
          - type: custom:button-card
            name: Last Boot
            icon: mdi:restart
            entity: sensor.last_booth_since
            show_icon: true
            show_label: false
            show_name: true
            show_state: true
            styles:
              icon:
                - color: var(--card-background-color)
              label:
                - justify-self: start
                - align-self: start
                - font-weight: bold
                - font-size: 12px
                - filter: opacity(40%)
                - margin-left: 12px
                - color: ''
              name:
                - align-self: end
                - justify-self: start
                - font-weight: bold
                - font-size: 15px
                - margin-left: 12px
                - color: var(--secondary-text-color)
              state:
                - justify-self: start
                - align-self: start
                - font-weight: bold
                - font-size: 12px
                - filter: opacity(40%)
                - margin-left: 12px
              img_cell:
                - border-radius: 50%
                - place-self: center
                - width: 30px
                - height: 30px
                - background-color: rgba(77, 163, 100, 0.5)
              grid:
                - grid-template-areas: '"i n" "i s" "i l"'
                - grid-template-columns: min-content auto
                - grid-template-rows: min-content min-content
              card:
                - border-radius: 15px
                - box-shadow: null
                - padding: 6px
            size: 60%
  - type: custom:bar-card
    card_mod:
      style: |-
        ha-card{
          --bar-card-border-radius: 5px;
          border-radius: 10px;
          box-shadow: 
        }
        bar-card-value {
          font-size: 12px;
          font-weight: bold;
          color: var(--secondary-text-color);
          }
        bar-card-name {
          color: var(--secondary-text-color);
          font-size: 12px;
          font-weight: bold;
          }
    entities:
      - entity: sensor.processor_use
        name: CPU
        color: rgba(244, 196, 48, 0.7)
      - entity: sensor.memory_use_percent
        name: RAM
        color: rgba(15, 82, 128, 0.7)
      - entity: sensor.disk_use_percent
        name: HDD
        icon: mdi:harddisk
        color: rgba(77, 163, 100, 0.7)
      - entity: sensor.processor_temperature
        name: CPU
        icon: hass:thermometer
        color: rgba(120, 24, 74, 0.7)
    columns: 1
    direction: right
    positions:
      icon: outside
      indicator: 'off'
      name: outside
      value: inside
    height: 20px
    width: 85%
    decimal: '0'
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.processor_use
                color: rgba(244, 196, 48, 0.7)
              - entity: sensor.memory_use_percent
                color: rgba(15, 82, 128, 0.7)
            hours_to_show: 24
            points_per_hour: 4
            lower_bound: ~0
            upper_bound: 100
            line_width: 1
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
      - type: custom:stack-in-card
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.processor_temperature
                color: rgba(120, 24, 74, 0.7)
            hours_to_show: 24
            points_per_hour: 4
            lower_bound: ~0
            upper_bound: 100
            line_width: 1
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade

[Timpalimpa (Timmy Ullhag)]

Mind sharing your room yaml?

[RonOnline (Ron)]

Sure, no problem. These are the first 4, but i hope you’ll get what you want!?

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Kamers
    card_mod:
      style: |
        ha-card {
          margin-top: -10px;
          margin-bottom: -10px;
          margin-left: 1px;
          margin-right: 1px;  
          --title-font-size: 16px !important;
        }    
  - type: custom:layout-card
    layout_type: custom:horizontal-layout
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Woonkamer
                secondary: >-
                  {{ states("sensor.mi_air_purifier_3_3h_temperature") |
                  round(0) }} °C
                icon: mdi:sofa
                entity: light.woonkamer_lampen
                tap_action:
                  action: navigate
                  navigation_path: woonkamer
                hold_action:
                  action: toggle
                icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
                fill_container: true
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    :host([dark-mode]) {
                      background-blend-mode: darken;
                    }
                    :host {
                      background-image: url('/local/woonkamer.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
                      background-size: 50% 100%;
                      background-position: right;
                      background-repeat: no-repeat;
                      background-blend-mode: lighten;
                      background-color: rgba(var(--rgb-card-background-color), 0.5);
                      {% if is_state('light.woonkamer_lampen', 'on') %}
                        box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
                      {% endif %}
                      --mush-icon-size: 56px;
                      height: 66px;
                      margin-left: -10px !important;
                    }
                    ha-card {
                      {% if is_state('light.woonkamer_lampen', 'on') %}
                        --primary-text-color:  {{ 'rgb(var(--rgb-yellow))'}};
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.woonkamer_voorkant_contact
                        state: 'on'
                    chip:
                      type: template
                      double_tap_action:
                        action: none
                      entity: cover
                      icon: >
                        {% set
                        state=states('binary_sensor.woonkamer_voorkant_contact')
                        %}

                        {% if state=='off' %}

                        fapro:door-closed

                        {% elif state=='on' %}

                        phu:lift-out-window-open

                        {% else %}

                        fapro:door-closed

                        {% endif %}
                      icon_color: >-
                        {% set
                        state=states('binary_sensor.woonkamer_voorkant_contact')
                        %}

                        {% if state=='off' %}

                        green

                        {% elif state=='on' %}

                        red

                        {% else %}

                        yellow

                        {% endif %}
                      card_mod:
                        style: >
                          {% if
                          is_state('binary_sensor.woonkamer_voorkant_contact',
                          'on') %}
                            ha-card {
                              animation: borderPulse 2s ease-out infinite;
                          }
                            @keyframes borderPulse {
                             50% {
                                box-shadow: 0 0 20px red;
                            }
                          }

                          {% endif %}
                      content: null
                      tap_action:
                        action: toggle
                      hold_action:
                        action: none
                  - type: conditional
                    conditions:
                      - entity: media_player.woonkamer
                        state_not: 'off'
                      - entity: media_player.woonkamer
                        state_not: unavailable
                      - entity: media_player.woonkamer
                        state_not: standby
                      - entity: media_player.woonkamer
                        state_not: paused
                    chip:
                      type: template
                      icon_color: red
                      icon: |-
                        {% set media_type = state_attr('media_player.woonkamer',
                        'app_name') %}
                        {% if media_type == 'NLZIET' %}
                          ios:nlziet-2
                        {% elif media_type == 'Netflix' %}
                          mdi:netflix
                        {% elif media_type == 'Videoland' %}
                          phu:videoland
                        {% elif media_type == 'Youtube' %}
                          mdi:youtube
                        {% elif media_type == 'Spotify' %}
                          mdi:spotify
                        {% elif media_type == 'Disney+' %}
                          phu:disney-plus
                        {% elif media_type == 'myTuner' %}
                          mdi:radio
                        {% else %}
                          mdi:plex
                        {% endif %}
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                  - type: conditional
                    conditions:
                      - entity: media_player.woonkamer_muziek
                        state_not: 'off'
                      - entity: media_player.woonkamer_muziek
                        state_not: unavailable
                    chip:
                      type: template
                      icon_color: blue
                      picture: >-
                        {{ state_attr('media_player.woonkamer_muziek',
                        'entity_picture') }}
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      card_mod:
                        style: |
                          ha-card {
                              {% set speed = state_attr('media_player.woonkamer_jbl','volume_level') %}
                              {% set animation = (1.25 - 2*speed) %}
                              animation: music {{animation}}s ease-in-out infinite alternate;
                              transform-origin: 50% 100%

                          } @keyframes music {
                            0%, 100% { transform: translateY(0px) scaleX(1); }
                            20% { transform: translateY(2px) scaleX(0.9); }
                            40% { transform: rotateY(10deg) rotateZ(-10deg); }
                            60% { transform: translateY(-4px) scaleX(1.1); }
                            80% { transform: rotateY(-10deg) rotateZ(10deg); }
                          }                         
                  - type: conditional
                    conditions:
                      - entity: group.lounge_windows
                        state: 'on'
                    chip:
                      type: template
                      icon_color: disabled
                      icon: mdi:window-open
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      --chip-spacing: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: 0px 0px;
                  height: 102px;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Keuken
                secondary: '{{ states("sensor.keuken_temp_temperature") | round(0) }} °C'
                icon: fapro:knife-kitchen
                entity: light.keuken_lampen
                tap_action:
                  action: navigate
                  navigation_path: keuken
                hold_action:
                  action: toggle
                icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
                fill_container: true
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    :host([dark-mode]) {
                      background-blend-mode: darken;
                    }
                    :host {
                      background-image: url('/local/kitchen.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
                      background-size: 50% 100%;
                      background-position: right;
                      background-repeat: no-repeat;
                      background-blend-mode: lighten;
                      --mush-icon-size: 56px;
                      height: 66px;
                      margin-left: -10px !important;
                      background-color: rgba(var(--rgb-card-background-color), 0.5);
                      {% if is_state('light.keuken_lampen', 'on') %}
                        box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
                      {% endif %}
                    }
                    ha-card {
                      {% if is_state('light.keuken_lampen', 'on') %}
                        --primary-text-color:  {{ 'rgb(var(--rgb-yellow))'}};
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips: null
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      --chip-spacing: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: 0px 0px;                
                  height: 102px;
                }
      - type: horizontal-stack
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Tuin
                secondary: >-
                  {{ states("sensor.tuin_temperatuur_temperature") | round(0) }}
                  °C
                icon: fapro:flower-daffodil
                entity: light.tuin_lampen
                tap_action:
                  action: navigate
                  navigation_path: tuin
                hold_action:
                  action: toggle
                icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
                fill_container: true
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    :host([dark-mode]) {
                      background-blend-mode: darken;
                    }
                    :host {
                      background-image: url('/local/garden.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
                      background-size: 50% 100%;
                      background-position: right;
                      background-repeat: no-repeat;
                      background-blend-mode: lighten;
                      --mush-icon-size: 56px;
                      height: 66px;
                      margin-left: -10px !important;
                      background-color: rgba(var(--rgb-card-background-color), 0.5);
                      {% if is_state('light.tuin_lampen', 'on') %}
                        box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
                      {% endif %}
                    }
                    ha-card {
                      {% if is_state('light.tuin_lampen', 'on') %}
                        --primary-text-color:  {{ 'rgb(var(--rgb-yellow))'}};
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.achterdeur_contact
                        state: 'on'
                    chip:
                      type: template
                      double_tap_action:
                        action: none
                      entity: cover
                      icon: >
                        {% set state=states('binary_sensor.achterdeur_contact')
                        %}

                        {% if state=='off' %}

                        fapro:door-closed

                        {% elif state=='on' %}

                        fapro:door-open

                        {% else %}

                        fapro:door-closed

                        {% endif %}
                      icon_color: >-
                        {% set state=states('binary_sensor.achterdeur_contact')
                        %}

                        {% if state=='off' %}

                        green

                        {% elif state=='on' %}

                        red

                        {% else %}

                        yellow

                        {% endif %}
                      card_mod:
                        style: >
                          {% if is_state('binary_sensor.achterdeur_contact',
                          'on') %}
                            ha-card {
                              animation: borderPulse 2s ease-out infinite;
                          }
                            @keyframes borderPulse {
                             50% {
                                box-shadow: 0 0 20px red;
                            }
                          }

                          {% endif %}
                      content: null
                      tap_action:
                        action: toggle
                      hold_action:
                        action: none
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      --chip-box-shadow: none;
                      --chip-background: none;
                      --chip-spacing: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: 0px 0px;                
                  height: 102px;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Slaapkamer
                secondary: >-
                  {{ states("sensor.slaapkamer_temp_temperature") | round(0) }}
                  °C
                icon: fapro:bed
                entity: light.slaapkamer_alle_lampen
                tap_action:
                  action: navigate
                  navigation_path: slaapkamer
                hold_action:
                  action: toggle
                icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
                fill_container: true
                layout: horizontal
                multiline_secondary: false
                card_mod:
                  style: |
                    :host([dark-mode]) {
                      background-blend-mode: darken;
                    }
                    :host {
                      background-image: url('/local/slaapkamer.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
                      background-size: 50% 100%;
                      background-position: right;
                      background-repeat: no-repeat;
                      background-blend-mode: lighten;
                      --mush-icon-size: 56px;
                      height: 66px;
                      margin-left: -10px !important;
                      background-color: rgba(var(--rgb-card-background-color), 0.5);
                      {% if is_state('light.mantra_smart_ceiling_fan', 'on') %}
                        box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
                      {% endif %}
                    }
                    ha-card {
                      {% if is_state('light.mantra_smart_ceiling_fan', 'on') %}
                        --primary-text-color:  {{ 'rgb(var(--rgb-yellow))'}};
                      {% endif %}
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.slaapkamer_raam_contact
                        state: 'on'
                    chip:
                      type: template
                      double_tap_action:
                        action: none
                      entity: cover
                      icon: >
                        {% set
                        state=states('binary_sensor.slaapkamer_raam_contact') %}

                        {% if state=='off' %}

                        fapro:door-closed

                        {% elif state=='on' %}

                        phu:lift-out-window-open

                        {% else %}

                        fapro:door-closed

                        {% endif %}
                      icon_color: >-
                        {% set
                        state=states('binary_sensor.slaapkamer_raam_contact') %}

                        {% if state=='off' %}

                        green

                        {% elif state=='on' %}

                        red

                        {% else %}

                        yellow

                        {% endif %}
                      card_mod:
                        style: >
                          {% if
                          is_state('binary_sensor.slaapkamer_raam_contact',
                          'on') %}
                            ha-card {
                              --chip-box-shadow: none;
                              --chip-background: none;
                              --chip-spacing: 0;                            
                              animation: borderPulse 2s ease-out infinite;
                          }
                            @keyframes borderPulse {
                             50% {
                                box-shadow: 0 0 20px red;
                            }
                          }

                          {% endif %}
                      content: null
                      tap_action:
                        action: toggle
                      hold_action:
                        action: none
                  - type: conditional
                    conditions:
                      - entity: media_player.slaapkamer_tv
                        state_not: 'off'
                      - entity: media_player.slaapkamer_tv
                        state_not: unavailable
                    chip:
                      type: template
                      icon_color: red
                      icon: >-
                        {% set media_type =
                        state_attr('media_player.slaapkamer_tv',

                        'app_name') %}

                        {% if media_type == 'tvshow' %}
                          mdi:television-classic
                        {% elif media_type == 'Netflix' %}
                          mdi:netflix
                        {% elif media_type == 'Videoland' %}
                          mdi:video
                        {% elif media_type == 'YouTube' %}
                          mdi:youtube-tv
                        {% else %}
                          mdi:plex
                        {% endif %}
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      card_mod:
                        style: |
                          ha-card {
                            --chip-box-shadow: none;
                            --chip-background: none;
                            --chip-spacing: 0;
                          }                        
                  - type: conditional
                    conditions:
                      - entity: fan.mantra_smart_ceiling_fan
                        state: 'on'
                    chip:
                      type: template
                      icon_color: green
                      icon: mdi:fan
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      card_mod:
                        style: |
                          ha-card {
                            --chip-box-shadow: none;
                            --chip-background: none;
                            --chip-spacing: 0;
                            animation: spin 1s linear infinite;
                          }
                alignment: end
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: 0px 0px;                
                  height: 102px;
                }
                  
view_layout:
  grid-area: favorites

[ArenaCloser]

Thanks everyone for sharing your setups!

@bedar89

Are there more updates planned on this? I’m curious how all your pages look like, for inspiration.

I have been busy lately, but I added three more tablet screenshots to the first post for you. Will also add the code to Github when I have time.

[gjaevert (Oscar Gjaevert)]

I wanted to share how my adaptive dashboard looks, and thank you for a great dashboard @ArenaCloser

I have changed some things, including the theme colors etc, but the logic with your grid systems and navigation is stil very much intact

Here are images of my desktop and mobile variants:

[ArenaCloser]

Cool dashboard! (And outside temperature, haha ). Your theme looks great, the desktop navigation bar looks especially good with it.

Could you share your energy price (today and tomorrow) graph?

[gjaevert (Oscar Gjaevert)]

Thank you, its the Noctis theme I use And yes, its cold in Norway this time of year

Its an Apex card, see here:

type: custom:apexcharts-card
header:
  show: true
  title: Energyprice Today & Tomorrow
  show_states: true
  colorize_states: true
graph_span: 2d
span:
  start: day
now:
  show: true
yaxis:
  - show: true
    min: 0
    apex_config:
      forceNiceScale: true
      tickAmount: 2
      labels:
        offsetX: 40
apex_config:
  chart:
    height: 130px
    width: 120%
    offsetX: -55
    offsetY: 26
  grid:
    show: false
  legend:
    show: false
  xaxis:
    labels:
      show: false
    axisBorder:
      show: false
    axisTicks:
      show: false
  title:
    style:
      fontSize: 10px
series:
  - entity: sensor.nordpool_oslo
    name: Today
    data_generator: |
      return entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    color: '#2eb9ff'
    stroke_width: 4
    show:
      legend_value: false
      in_header: false
  - entity: sensor.nordpool_oslo
    name: Tomorrow
    data_generator: |
      return entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    color: '#FF9800'
    stroke_width: 4
    show:
      legend_value: false
      in_header: false
  - entity: sensor.nordpool_oslo
    name: Price Now
    type: area
    extend_to: now
    float_precision: 2
    stroke_width: 0
    color: '#2eb9ff'
    show:
      in_chart: false
      in_header: true

I do have mini-graph-card I think i like better, but its not able to show the line for the current hour, so I am not totally sure which one to go for.
Here is the mini graph card as well:

Downside is it needs 48 hourly sensors

type: custom:mini-graph-card
entities:
  - entity: sensor.nordpool_oslo
    show_graph: false
    show_state: true
    state_adaptive_color: true
  - entity: sensor.nordpool_today_hr_00_01
    name: Today hour 1
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_01_02
    name: Today hour 2
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_02_03
    name: Today hour 3
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_03_04
    name: Today hour 4
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_04_05
    name: Today hour 5
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_05_06
    name: Today hour 6
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_06_07
    name: Today hour 7
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_07_08
    name: Today hour 8
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_08_09
    name: Today hour 9
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_09_10
    name: Today hour 10
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_10_11
    name: Today hour 11
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_11_12
    name: Today hour 12
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_12_13
    name: Today hour 13
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_13_14
    name: Today hour 14
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_14_15
    name: Today hour 15
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_15_16
    name: Today hour 16
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_16_17
    name: Today hour 17
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_17_18
    name: Today hour 18
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_18_19
    name: Today hour 19
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_19_20
    name: Today hour 20
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_20_21
    name: Today hour 21
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_21_22
    name: Today hour 22
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_22_23
    name: Today hour 23
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_today_hr_23_24
    name: Today hour 24
    color: '#03a9f4'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_00_01
    name: Tomorrow hour 1
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_01_02
    name: Tomorrow hour 2
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_02_03
    name: Tomorrow hour 3
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_03_04
    name: Tomorrow hour 4
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_04_05
    name: Tomorrow hour 5
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_05_06
    name: Tomorrow hour 6
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_06_07
    name: Tomorrow hour 7
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_07_08
    name: Tomorrow hour 8
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_08_09
    name: Tomorrow hour 9
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_09_10
    name: Tomorrow hour 10
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_10_11
    name: Tomorrow hour 11
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_11_12
    name: Tomorrow hour 12
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_12_13
    name: Tomorrow hour 13
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_13_14
    name: Tomorrow hour 14
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_14_15
    name: Tomorrow hour 15
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_15_16
    name: Tomorrow hour 16
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_16_17
    name: Tomorrow hour 17
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_17_18
    name: Tomorrow hour 18
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_18_19
    name: Tomorrow hour 19
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_19_20
    name: Tomorrow hour 20
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_20_21
    name: Tomorrow hour 21
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_21_22
    name: Tomorrow hour 22
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_22_23
    name: Tomorrow hour 23
    color: '#ff9800'
    show_legend: false
  - entity: sensor.nordpool_tomorrow_hr_23_24
    name: Tomorrow hour 24
    color: '#ff9800'
    show_legend: false
name: Energyprice current, today, tomorrow
group_by: hour
hours_to_show: 1
hour24: true
icon: mdi:cash-multiple
show:
  graph: bar
  labels: true
style: |
  }
  .card-content {
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 0px;
  }