Combine cards in front end

Configuration Frontend
1

I’m looking to combine two cards in my front end, one is a mark down card and the other is a custom mini graph card in horizontal stack. The code for both cards is below and I’m hopnig this is possible but can someone point me in the right direction please?

content: |
  ## Sever Stats
style: |
  ha-card {
     margin: 0px 0px 0px 0px;
   }
   h2 {
     font-size: 18px;
     font-weight: 400;
     padding-left: 10px;
     border-left: 3px solid rgba(81, 134, 236);
   }
type: markdown

border-left: '3px solid rgba(81, 134, 236)'
cards:
  - entities:
      - sensor.glances_cpu_used
    font_size: 75
    line_color: blue
    line_width: 8
    type: 'custom:mini-graph-card'
  - entities:
      - sensor.glances_ram_used_percent
    font_size: 75
    line_color: '#e74c3c'
    line_width: 8
    type: 'custom:mini-graph-card'
  - entities:
      - sensor.glances_data_used
    font_size: 75
    line_color: var(--accent-color)
    line_width: 8
    type: 'custom:mini-graph-card'
font-size: 18px;
font-weight: 400;
margin: 0px 0px 0px 0px;
padding-left: 10px;
type: horizontal-stack
2

Not 100% sure what you’re after, but if you’re trying to make it look like two different card types are in the same card (no margins/borders/etc.) you can use this:

I use it in a few different places and it works great. Here’s an example where I wanted to combine a 3 column glance card and 4 column glance card into a seamless ‘look’:
image

I combine it w/ https://github.com/thomasloven/lovelace-card-mod which allows me to tweak the margins a bit to get it even cleaner.

3

read this, it refers to TV remote card, but built using vertical-stack-in-card , the latter is what you might want to look into:

4

Thanks for this, making progress, is there any way to move the two entities (script and sensor) under the three graphs do you know?

image
image1355×922 51.7 KB

cards:
  - entities:
      - sensor.speedtest_download
    font_size: 75
    line_color: blue
    line_width: 8
    type: 'custom:mini-graph-card'
  - entities:
      - sensor.speedtest_upload
    font_size: 75
    line_color: '#e74c3c'
    line_width: 8
    type: 'custom:mini-graph-card'
  - entities:
      - sensor.speedtest_ping
    font_size: 75
    line_color: var(--accent-color)
    line_width: 8
    type: 'custom:mini-graph-card'
  - cards: null
    entities:
      - sensor.speedtest_lastrun
      - script.1588105019194
    type: entities
mode: horizontal
title: Speed Test
type: 'custom:stack-in-card'
5

yeah, several ways I guess,
not sure which custom card you are using (there’s quite a few in github) but if it is the one I linked to then you should be able to do,

type: 'custom:stack-in-card'
mode: vertical
title: Speed Test
cards:
  - type: horizontal-stack
    cards: 
      - type: <whatever sensor or graph>
        ..
        ..
      - type: <whatever sensor or graph>
        ..
        ..
  - type: horizontal-stack
    cards:
      - type: <your script or sensor>
        ..
        ..
      - type: <your script or sensor>
        ..
        ..

note: I have changed your vertical to horizontal in the stack-in: block

So what this does it create one overall container card,
in which two cards are stacked vertically,
in which the first card is a horizontal set of cards for each of your sensors and graphs,
and the second vertical card (underneath the first) is a horizontal set of cards for your script and button

i.e.

+ Custom:Stack-In "Container" card of mode VERTICAL
|
+-- Top card 
|          |
|          +-- First horizontal stack card
|                                  |
|                                  +-- Entities card 
|                                               |
|                                               +-- sensor / graph card
|                                               +-- sensor / graph card 
|                                               +-- sensor / graph card 
|
+- Bottom card
           |
           +-- Second horizontal stack card
                                   |
                                   +-- Entities card 
                                                |
                                                +-- script
                                                +-- button

top-card and bottom-card are shown for illustration and concept - you don’t actually declare them explicitly because they are in fact the horizontal-stack cards.

there are other cards like @Markus99 linked to, and other ways - Im sure members will share their thoughts.

Hope this helps?

1 Like
7

Hi @ninjadog

How can I combine these 2 cards? Any help will be appreciated thanks.
image