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.
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:
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%)