2 cards on top of eachother?

Configuration Frontend
1

Team,
Would it be possible to place 2 cards on top of eachother?
Use case:
An overview of temperatures where I can clearly see the outside temperature (trend). Besides knowing the outside temp it’s great to see if it’s getting warmer or colder.
image

Shown here:

  • 4 column grid card, with 4 vertical-stacks, each containing 3 button-cards
  • photoshopped on top of a sensor card

Thinking about this “on top of” could also be “very very close below”.
When “on top of” the text may have to be adjusted to keep it readable.

2

You can try it within picture elemnt card, placing cards as elements in the same spot. Eventually using grid layout card and put the cards into the same cell… Just a thougths, not sure if this will work. Ah, probably also you will need to use card mod to make background of at least one card transparrent…

1 Like
3

It is not what you want but take it as an inspiration. Card is not from me, if the author is seeing my post, feel free to ask for credit.

type: picture-elements
image: local/SUN200-5KTL-L1.png
card_mod:
  style: |
    ha-card {
      background: transparent;
    }
elements:
  - type: state-label
    entity: sensor.inverter_input_power
    prefix: 'Puissance d''entrée:  '
    style:
      color: grey
      top: 82%
      left: 50%
      font-size: 20px
  - type: state-label
    entity: sensor.inverter_daily_yield
    prefix: 'Rendement journalier:  '
    style:
      color: grey
      top: 12%
      left: 50%
      font-size: 20px
  - type: custom:mini-graph-card
    card_mod:
      style: |
        ha-card {
        border: none;
        --ha-card-background: "rgba(0, 0, 0, 0.3)";
          #
          #
        box-shadow: none;
        color: #FF9800;
        }
        .header {
          display: none !important;
        }
    style:
      top: 50%
      left: 50%
      width: 90%
      height: 42%
    entities:
      - entity: sensor.inverter_input_power
    hour24: true
    show:
      name: false
      state: false
      icon: false
      extrema: true
      line_width: 1
      font_size: 125
      height: 100
      points_per_hour: 12
      fill: fade

Giving you something like this:
image

1 Like
4

You can overlap cards that support card mod (include ha-card elements) by setting a negative margin-top on the lower one.

5

It might depend on cards used; I tried this in the past (do not recall what cards used, though) and it was causing clipping of card content on the card border :frowning: .

6

To replicate the photoshop’d example i’d use custom:stack-in card.