I would like to have the name and state values aligned to the left, besides the icon.
Now, as you can see in my screenshot it’s aligned to the right.
![Schermafbeelding 2024-02-18 om 19.20.41](https://community-assets.home-assistant.io/original/4X/4/1/a/41ac6477c69d90ba63a17ef00b3cf689f27643fb.png)
This is the code I use for all items:
type: custom:button-card
entity: binary_sensor.motion_sensor_brievenbus_motion
name: 'post:'
show_state: true
icon: mdi:email
styles:
card:
- height: 40px
- background-color: rgba(0, 0, 0, 0)
- border: 0px solid white
- border-radius: 0px
- padding: 0px 0px
grid:
- grid-template-areas: '"i n s"'
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 40px
- padding: 0px 45px
name:
- padding: 0px 0px
- text-transform: lowercase
state:
- padding: 0px 5px
- padding-right: 50px
- text-transform: lowercase
state:
- value: 'off'
styles:
card:
- filter: opacity(70%)
icon:
- filter: grayscale(100%)
I’ve managed to align the name column to the left with the help of this CSS grid change:
By setting the icon column to a fixed value (95px in my case)
styles:
grid:
- grid-template-areas: '"i n s"'
- grid-template-columns: 95px auto auto
This is were I found a few pointers in the right direction:
Currently it looks like this:
![Schermafbeelding 2024-02-21 om 12.58.01](https://community-assets.home-assistant.io/original/4X/0/e/e/0ee5fa87d83a28d712ed77c0ba10fc1d94d86a69.png)
This is the current complete code (per item):
type: custom:button-card
entity: binary_sensor.motion_sensor_brievenbus_motion
name: 'post:'
show_state: true
icon: mdi:email
styles:
card:
- height: 40px
- background-color: rgba(0, 0, 0, 0)
- border: 0px solid white
- border-radius: 0px
- padding: 0px 0px
grid:
- grid-template-areas: '"i n s"'
- grid-template-columns: 95px auto auto
img_cell:
- justify-content: start
- align-items: start
icon:
- justify-self: start
- width: 45px
- padding: 0px 0px
- padding-left: 30px
name:
- padding: 0px 1px
- text-transform: lowercase
- justify-self: left
- padding left: 10px
state:
- padding: 0px 1px
- padding-right: 40px
- text-transform: lowercase
- justify-self: end
state:
- value: 'off'
styles:
card:
- filter: opacity(70%)
icon:
- filter: grayscale(100%)