[Help] Layout of custom card?

Configuration Frontend
1

I’m trying to create a custom mushroom card that uses markdown, and has the typical icon to the left.


I managed to cobble it together with stack-in-card and mushroom-template-card.

CleanShot 2023-12-05 at 3 .45.55@2x
CleanShot 2023-12-05 at 3 .45.55@2x761×360 17.1 KB



It looks how I want it to but it ‘breaks’ when resizing, and the text overlaps the icon

CleanShot 2023-12-05 at 7.34.57@2x


Here’s the code I used

type: vertical-stack
title: Appliances
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.dishwasher_state_markdown
        icon: mdi:dishwasher
        icon_color: blue
      - type: markdown
        content: '{{ states.sensor.dishwasher_state_markdown.state }}'
        card_mod:
          style: |
            ha-card {
              margin-left: -180px;
              padding-left: 46px;
              box-shadow: none;
            }

Is there a different (better) way of doing it than I’ve attempted?

If not, how can make the card responsive and prevent the elements overlapping when resized?

2

Take a look at this post and see if it meets your needs.

3

Almost.

I already managed that with a ‘regular’ icon (top in the screenshot), but wanted the same style icon as used in mushroom cards, within a circle.

I created a custom icon (svg) in the same style, but it pushes the text down to the bottom of the card.

CleanShot 2023-12-05 at 10.04.05@2x


I don’t know how to fix that :man_shrugging:t3: