Customisable Area Card with custom CSS

I love the area card for its power to show a lot of information packed in a simple and nice lay-out. Unfortunately for me it’s not useful, I really miss the ability to customize the card. I tried to recreate the card with custom CSS, using the card-mod, vertical-stack-in-card, button-card and paper-buttons-row custom cards. It enables you to integrate any information you want in the card. Hope this can be of use to some.

Normal card:

Small viewport size:

type: custom:vertical-stack-in-card
cards:
  - type: custom:button-card
    icon: mdi:home
    name: Area Card
    tap_action:
      action: navigate
      navigation_path: /lovelace-woonkamer
    hold_action:
      action: none
    double_tap_action:
      action: none
    styles:
      icon:
        - color: '#ffffff00'
      name:
        - color: '#ffffff00'
    card_mod:
      style: |
        ha-card {
          background: #ffffff00; 
        }
  - square: false
    type: grid
    cards:
      - type: custom:paper-buttons-row
        buttons:
          - state: >-
              {{ states("sensor.temperature_woonkamer") | round(1) }} °C
            icon: mdi:thermometer
          - state: >-
              {{ states("sensor.humidity_woonkamer") | round(0) }}%
            icon: mdi:water-percent
        base_config:
          layout: icon|state
          ripple: none
          styles:
            state:
              color: rgba(227, 227, 227, 0.6)
              font-size: 16px;
            icon:
              color: rgba(227, 227, 227, 0.6)
        styles:
          justify-content: start
          padding: 28px 0px 0px 8px
        extra_styles: |
          paper-button:first-child:before {
            content: "Woonkamer";   /* Name for the area-card */
            color: #fff;
            position: absolute;
            left: 8px;
            top: -20px;
            font-size: 24px;
          }
          paper-button {
            text-wrap: nowrap;          
          }
      - type: custom:paper-buttons-row
        buttons:
          - entity: light.group_woonkamer
          - entity: scene.sfeerverlichting_woonkamer
            tap_action:
              action: call-service
              service: scene.turn_on
              target:
                entity_id: scene.sfeerverlichting_woonkamer
          - entity: cover.cover_woonkamer
            state_icons:
              open: mdi:blinds-vertical
              opening: mdi:blinds-vertical
              closed: mdi:blinds-vertical-closed
              closing: mdi:blinds-vertical-closed
        base_config:
          name: false
          styles:
            button:
              margin-left: 10px
              border-radius: 50%
              color: '#fff'
              background-color: rgba(114, 114, 114, 0.7)
              min-width: 36px
              min-height: 36px
            icon:
              width: 24px
              height: 24px
          state_styles:
            'on':
              icon:
                color: var(--state-light-active-color)
              ripple:
                color: var(--state-light-active-color)
        styles:
          justify-content: end
          padding: 13px 13px 20px
        extra_styles: |
          paper-button:hover {
            background-color: rgba(114, 114, 114, 0.8) !important;
          }
          @container parent_card (max-width: 390px) {
            paper-button {
              margin-bottom: 8px;
            }
            .flex-box {
              flex-direction: column;
              position: relative;
              top: calc(2 * -56px);   /* Change this value: (number of buttons - 1) */
              align-items: end !important;
            }
          }
    columns: 2
card_mod:
  style: |
    ha-card {
      background-image: url("/local/woonkamer.jpg");   /* location of background image */
      background-position: 50%;
      background-size: cover;
      border: none;
      min-height: 218px;
      container-name: parent_card;
      container-type: inline-size;
      position: relative;
      transition: none;
    }
    ha-card:before {
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      background: linear-gradient(0deg, rgba(33, 33, 33, 0.9) 0%, rgba(33, 33, 33, 0) 45%);
    }
    ha-card hui-grid-card {
      position: absolute;
      width: 100%;
      bottom: 0;
      width: 100%;
      height: 76px;
    }

The weather card shows the current weather in the button icon (Thanks @homerum). To create this simply use this code for the button:

      - type: custom:paper-buttons-row
        buttons:
          - entity: weather.home
            icon: >-
              {% set weather_entity = "weather.home" %}{% if
              is_state(weather_entity,"clear-day") %} mdi:weather-sunny {% elif
              is_state(weather_entity,"sunny") %} mdi:weather-sunny {% elif
              is_state(weather_entity,"clear") %} mdi:weather-sunny {% elif
              is_state(weather_entity,"clear-night") %} mdi:weather-night {%
              elif is_state(weather_entity,"rainy") %} mdi:weather-rainy {% elif
              is_state(weather_entity,"pouring") %} mdi:weather-pouring {% elif
              is_state(weather_entity,"snow") %} mdi:weather-snowy {% elif
              is_state(weather_entity,"fog") %} mdi:weather-fog {% elif
              is_state(weather_entity,"sleet") %} mdi:weather-partly-snowy-rainy
              {% elif is_state(weather_entity,"wind") %} mdi:weather-windy {%
              elif is_state(weather_entity,"cloudy") %} mdi:weather-cloudy {%
              elif is_state(weather_entity,"partlycloudy") %}
              mdi:weather-partly-cloudy {% elif
              is_state(weather_entity,"partly-cloudy-night") %}
              mdi:weather-night-partly-cloudy {% elif
              is_state(weather_entity,"hail") %} mdi:weather-hail {% elif
              is_state(weather_entity,"lightning") %} mdi:weather-lightning {%
              elif is_state(weather_entity,"tstorm") %}
              mdi:weather-lightning-rainy {% endif %}
2 Likes