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 %}