Skip to content

Weather Card

Description

example-image

This is a card based on simple-weather-card to show your weather. simple-weather-card lovelace ressources must be installed for this one!

Variables

Variable Default Required Notes
entity your weather entity
ulm_card_weather_name friendly_name customize display name
ulm_card_weather_primary_info extrema customize primary info. Set to false to disable. See simple-weather-card for more information
ulm_card_weather_secondary_info precipitation customize secondary info. Set to false to disable. See simple-weather-card for more information
ulm_card_weather_backdrop false add backdrop. See simple-weather-card for more information

Usage

- type: "custom:button-card"
  template: card_weather
  entity: weather.my_local_weather
  variables:
    ulm_card_weather_name: " "
    ulm_card_weather_primary_info:
      - wind_speed
      - precipitation_probability
    ulm_card_weather_backdrop:
      fade: true
Template Code
card_weather.yaml
---
### Card Weather ###
card_weather:
  variables:
    ulm_card_weather_backdrop: false
    ulm_card_weather_primary_info: "extrema"
    ulm_card_weather_secondary_info: "precipitation"
  show_icon: false
  show_name: false
  show_label: false
  styles:
    grid:
      - grid-template-areas: "'item1'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content"
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "0px"
  custom_fields:
    item1:
      card:
        type: "custom:simple-weather-card"
        entity: "[[[ return entity.entity_id; ]]]"
        name: "[[[ return variables.ulm_card_weather_name || entity.attributes.friendly_name ]]]"
        primary_info: "[[[ return variables.ulm_card_weather_primary_info ]]]"
        secondary_info: "[[[ return variables.ulm_card_weather_secondary_info ]]]"
        backdrop: "[[[ return variables.ulm_card_weather_backdrop ]]]"
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }
          ha-card.type-custom-simple-weather-card {
            padding: 24px;
          }
          ha-card[bg].type-custom-simple-weather-card{
            color: white;
          }
          ha-card.type-custom-simple-weather-card .weather__info {
            text-align: left
          }