Mushroom Cards - Build a beautiful dashboard easily ๐Ÿ„ (Part 1)

Wow, you did a great job :grin: Thanks alot!
This is how I did it for my self.

The Code for Nest Cam Card.

  1. You need - Stack in Card (Hacs)
  2. You need - Layout Card (Hacs)
  3. If you need to change the size of the images or border size, just change the bold text :grinning:
  • type: custom:layout-card
    layout_type: masonry
    layout:
    width: 106
    max_cols: 1
    height: auto
    padding: 0px
    card_margin: var(โ€“masonry-view-card-margin, 0px 8px 14px)
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Nest Cam
    secondary: Driveway
    icon: mdi:camera
    icon_color: blue
  - type: custom:layout-card
    layout_type: masonry
    layout:
      width: 106
      max_cols: 1
      height: auto
      padding: 0px
      card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
    cards:
      - show_state: false
        show_name: false
        camera_view: auto
        type: picture-entity
        entity: camera.uppfart
        camera_image: camera.uppfart
        theme: Mushroom
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
            }

Best regards
Thekholm

19 Likes