Creating a clean card for 2 switches | Home Assistant | Page 1

muted isle Oct 20, 2025, 3:47 PM

#

Hi all, i'd like to create a clean-looking card that has a similar layout to the attached screenshot. This works fine, however i'd like to show the toggle icon on the right side on the right, and have the markdown card below aligned to the right also. I'd like to remove the slight borders as well that are applied as well, if possible. I've got most of the way there but it's just these last things i'd like to do to give it the full clean look.

Some extra info:

the two switches are using a mushroom-entity-card.
the whole thing is encased in a custom:stack-in-card.
I've tried using AI to guide me with the alignment but it wasn't working (as is often the case)

Any help would be appreciated, thanks!

distant sky Oct 21, 2025, 12:47 AM

#

muted isle Hi all, i'd like to create a clean-looking card that has a similar layout to the...

Which stack-in-card are you running? The one found in HACS by RomRider is outdated and doesn't work properly. Use the one by stickpin instead. https://github.com/stickpin/stack-in-card
That will help with the borders inside. Alternately, you can apply some card-mod to what you have.

#

In terms of flipping the switch to the other side, it might be doable with card-mod but would be a hassle. You might be better off hiding the text so you have just the switch and then use a Markdown card to make the label. This would be easier than trying to move elements around inside the card IMO. If you need a bit more help with this, lemme know. (I'm mobile at the moment or I'd be able to add more details.)

muted isle Oct 21, 2025, 8:28 AM

#

ah, yeah i've updated stack-in-card now, borders fixed. thanks!

as for the switches / MD, i've got this far. i can't seem to make it go to the right, and as it's a html tag markdown doesnt parse in it. would i be better off using a mushroom title card here instead?

- type: markdown
  content: >
    <div style="text-align: right;">
      # Right
    </div>

Also, is there a way i can specify custom widths for cards like you can with the layout tab in a section?

#

id like to squeeze the labels up closer to the switches to give the title a bit more room so it doesn't go over 2 lines

distant sky Oct 21, 2025, 10:00 AM

#

For Markdown alignment, you could try cheating and put the text in a table and right-align the cell. Here's an example: ```yaml
type: markdown
content: |
<h1><center> Alignment </center></h1>
<table width="100%" style="margin: 0px">
<tr>
<td align="left"><font color="red"><ha-icon icon="mdi:format-align-left"></ha-icon>left</td>
<td align="center"><font color="b"black><ha-icon icon="mdi:format-align-center"></ha-icon>centered</td>
<td align="right"><font color="blue">right<ha-icon icon="mdi:format-align-right"></ha-icon></td>
</tr>
</table>

distant sky Oct 21, 2025, 11:05 AM

#

The custom:stack-in-card is good for combining a couple of cards without needing much customization. For something like what you're wanting to do, I'd use the custom:button-card. It is super-powerful once you start looking at some of its features. (There's some new stuff in it that I haven't even played with yet.) Here's an example I threw together. I could only post so much because of too many characters, but this could give you something to work with. (Note: I used Markdown cards for the labels, but plain custom_fields could be used instead. Additional custom_fields could be added to incorporate the bottom labels.
EDIT: There's some card_mod used in the Markdown cards.

#

type: custom:button-card
styles:
  card:
    - width: 500px
    - height: 75px
    - margin: 0px
    - padding: 0px
  grid:
    - grid-template-areas: "'left-toggle left-markdown header right-markdown right-toggle'"
    - grid-template-columns: 8% auto 40% auto 8%
    - grid-template-rows: min-content
custom_fields:
  left-toggle:
    card:
      type: custom:button-card
      entity: input_boolean.tester
      show_name: false
      styles:
        card:
          - box-shadow: none
      state:
        - icon: mdi:toggle-switch
          value: "on"
          color: green
        - icon: mdi:toggle-switch-off
          value: "off"
          color: red
      size: 50px
      tap_action:
        action: toggle
  left-markdown:
    card:
      type: markdown
      content: Left
      card_mod:
        style: |
          ha-card {
            background: transparent;
            color: black;
            box-shadow: none;
            text-align: left
          }
  header:
    card:
      type: markdown
      content: |
        <h1> Outlet 1
      card_mod:
        style: |
          ha-card {
            background: transparent;
            color: black;
            box-shadow: none
          }
  right-markdown:
    card:
      type: markdown
      content: Right
      card_mod:
        style: |
          ha-card {
            background: transparent;
            color: black;
            box-shadow: none;
            text-align: right
          }
  right-toggle:
    card:
      type: custom:button-card
      entity: input_boolean.tester
      show_name: false
      styles:
        card:
          - box-shadow: none
      state:
        - icon: mdi:toggle-switch
          value: "on"
          color: green
        - icon: mdi:toggle-switch-off
          value: "off"
          color: red
      size: 50px
      tap_action:
        action: toggle

muted isle Oct 21, 2025, 11:16 AM

#

damn, that looks great! thats exactly what i want, however when i import that exact yaml onto a dashboard (and i've updated the switch entities), it still has borders and the text doesn't align. any ideas why that would be? i've checked it's not any chrome extensions like dark reader, its like it on phone too

#

my button-card version is 5.0.2 which i think is the latest and all updates for HA has been applied

distant sky Oct 21, 2025, 11:19 AM

#

I had a feeling that would happen. I meant to mention it but forgot. My theme probably has something handling that. Adding border: none; for the Markdown cards (in the card_mod section) and - border: none for the toggles under the box-shadow should clear that up.

#

it still has borders and the text doesn't align.
You might need to get card_mod, too. I think I added that to my message above while you were typing.

muted isle Oct 21, 2025, 11:25 AM

#

i do have card-mod too, the borders on the switches are gone but not on the md

#

and text-align isn't working either after applying those fixes, i do have quite a lot of HACS addons but i've never messed with themes, i liked HA's default so just stuck with it

distant sky Oct 21, 2025, 11:29 AM

#

No worries. I'm already work on the next version. Removed the Markdown cards and using custom_fields. Should give the flexibility you're looking for.

#

I'm also not using the newest version of card_mod. Both custom:button-card and card-mod have some breaking changes that I need to work through before updating. So, that could be an issue, too.

#

Try using border: none !important; for the Markdown cards. It might not work but worth trying.

muted isle Oct 21, 2025, 11:36 AM

#

i did try that, unfortunately no luck. i downgraded card-mod to v3.4.5 and it's working though, still no right-align on text though. ~~unrelated, do u know why some things on HACS have a little blue diamond next to them? i thought it meant update but it doesnt seem so~~ answered myself, it's just official repos

distant sky Oct 21, 2025, 11:54 AM

#

Not exactly finished but a little bit better (maybe).

#

type: custom:button-card
styles:
  card:
    - height: 65px
    - margin: 0px
    - padding: 5px
  grid:
    - grid-template-areas: |
          "left-toggle left-markdown header right-markdown right-toggle"
    - grid-template-columns: 8% auto 40% auto 8%
    - grid-template-rows: max-content
  custom_fields:
    header:
      - font-size: 26px
      - font-weight: bold
    right-markdown:
      - text-align: right
      - font-size: 18px
    left-markdown:
      - text-align: left
      - font-size: 18px
    left-extra: 
      - bottom: 0px
      - left: 3%
      - position: absolute
    right-extra: 
      - bottom: 0px
      - right: 3%
      - position: absolute
custom_fields:
  left-toggle:
    card:
      type: custom:button-card
      entity: input_boolean.tester
      show_name: false
      styles:
        card:
          - box-shadow: none
          - border: none
      state:
        - icon: mdi:toggle-switch
          value: "on"
          color: green
        - icon: mdi:toggle-switch-off
          value: "off"
          color: red
      size: 50px
      tap_action:
        action: toggle
  left-markdown: Left
  header: Outlet 1
  right-markdown: Right
  right-toggle:
    card:
      type: custom:button-card
      entity: input_boolean.tester
      show_name: false
      styles:
        card:
          - box-shadow: none
          - border: none
      state:
        - icon: mdi:toggle-switch
          value: "on"
          color: green
        - icon: mdi:toggle-switch-off
          value: "off"
          color: red
      size: 50px
      tap_action:
        action: toggle
  left-extra: Road Side Left Junction
  right-extra: Road Side Right Junction

muted isle Oct 21, 2025, 12:01 PM

#

working perfectly now, thanks again. one last question to make this perfect, is there a way i can make the left and right extra be a variable? i have 10 outlets of this style and they're using input_text helpers for each side, left and right. so for example, this one is input_text.outdoor_outlet_(number)_(left/right)_location, and there's a second line which is an input_select with the name input_select.outdoor_outlet_(number)_(left/right)_location_christmas. i tried doing the usual {{}} template stuff but it seems this is just text

#

basically my use case for the select is i update those in a configuration dashboard, and then my automation to turn the xmas lights on/off has options to specify what side of the house to toggle the lights. and then the text ones are in a markdown legend that tells me what plug goes to what as there's quite a few haha

#

extra info as well, i'll be putting this into a decluttering-template where i just provide the outlet number and it'll update. i dont need any assistance with that though, should be easy enough

distant sky Oct 21, 2025, 12:21 PM

#

You shouldn't need to use the decluttering-card with the custom:button-card. (You can, but it is just an extra step.) The custom:button-card is capable of using variables and the entire card can be turned into its own template for easily re-using the code. Also, it uses JavaScript and not Jinja like most other HA cards. (So [[[ ]]] vs {{ }} ). For the syntax to get the extra to return a state: right-extra: "[[[ return states['input_text.room_selector'].state ]]]"

#

If you incorporate variables, you could use something like right-extra: "[[[ return states[variables.input_text_entity].state ]]]"
EDIT: Forgot to add variables. for referencing the entity variable.

#

See Variables and Configuration Templates.

muted isle Oct 21, 2025, 12:25 PM

#

ahhh forgot about that, yep that's all working perfectly now! i'll mess around with the button-card variables and work it out. thanks once more, you've been a massive help :]

void tusk Oct 21, 2025, 3:46 PM

#

muted isle i did try that, unfortunately no luck. i downgraded card-mod to v3.4.5 and it's ...

what blue diamond? there is no such thing as official in HACS.

muted isle Oct 21, 2025, 3:47 PM

#

this next to the description of the item

void tusk Oct 21, 2025, 3:47 PM

#

ah, that is just something that thomasloven starts all his descriptions with on github.

#

muted isle Oct 21, 2025, 3:48 PM

#

ohhhhh for years i've thought it was an update available icon that was just broken

#Creating a clean card for 2 switches