Lovelace: Button card

[ASNNetworks]

I think the issue is how you’re using style. Basically you’re saying: when the state of the entity
input_text.office_lights_current_scene is scene_1 , use this styling: and then you style state with name: On. But that is not a style.

Styles are things like colors, width, filters etc. The variable show_state: true displays the actual state of the entity you list there. I believe you can’t change what state actually says. That’s kinda the whole use case of state, so it shows the acual state of the entity in HA. You should use label if you want to have something below the name that you can change.

Try:

                - type: 'custom:button-card'
                  entity: input_text.office_lights_current_scene
                  show_label: true
                  label: 'Off'
                  show_state: false
                  icon: mdi:ceiling-light
                  name: 'Deckenlicht: Normal'
                  template: base_2x2
                  gridrow: 2
                  gridcol: 2 / 4
                  tap_action:
                    action: call-service
                    service: scene.turn_on
                    service_data:
                      entity_id: scene.buro_deckenleuchte_rechts_links_normal
                  styles:
                    card:
                      - box-shadow: >
                          [[[ return (entity.state === 'scene_1' || entity.state === 'home') ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]

                      - color: >
                          [[[ return (entity.state === 'scene_1' || entity.state === 'home') ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
                      
                      - background-color: >
                          [[[ return (entity.state === 'scene_1' || entity.state === 'home') ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]
                  state:
                    - value: 'scene_1'
                      label: 'On'
                      styles:

What this basically tells the button to do is: put a label under the name as default with the text ‘Off’. But when the state of the entity input_text.office_lights_current_scene changes to scene_1 then it will change the label to ‘Off’.

You can also add stylings (I put it at the bottom) there, so that icons, label, name etc changes colors for instance when the state has changed to scene_1. Make sure you use the indents under there, just like you did on the main styles. If you don’t use styles there, it will just keep the default style on the state. This way you can create multiple states with variables (like icon, label, name) and styles that change based on the state of the entity.

[Mariusthvdb (Marius)]

you need to use the state_display option, which was introduced for this especially, and of course, it supports templates.

example:

state_display: >
  [[[ return 'Dst: ' + entity.attributes.next.clock ]]]

or somewhat more complex:

  state_display: >
    [[[ function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
        }
        var id = entity.entity_id.split('_').pop(-1);
        var fakestate = `<span style="color: var(--active-color);"> ${entity.state}</span>`;
        var fakelabel = `<span style="color: var(--active-color);"> ${capitalizeFirstLetter(id)}</span>`;
        return (entity.state == 'on') ? fakestate + ': ' + fakelabel : null; ]]]

state_display responds to show_state:

[Basti84 (Bastian Seidel)]

Thank you very much for your explanation and suggested solution.
Works perfectly. Here is my final code:

Button:

                - type: 'custom:button-card'
                  entity: input_text.office_lights_current_scene
                  template: base_2x2_lights
                  name: 'Deckenlicht: Normal'
                  variables:
                    var_1: 'scene_1'
                  gridrow: 2
                  gridcol: 2 / 4

                  hold_action:
                    action: more-info
                    entity: light.deckenleuchte_buro

                  tap_action:
                    action: call-service
                    service: input_text.set_value
                    service_data:
                      value: '[[[ return variables.var_1 ]]]'
                      entity_id: input_text.variable_text_1

Template:

  base_2x2_lights:
    aspect_ratio: 1/1
    show_state: false
    show_icon: true
    icon: mdi:ceiling-light
    show_label: true
    label: 'Aus'
    variables:
      var_1: null
    size: 40%
    color: '#148eff'
    state:
      - value: '[[[ return variables.var_1 ]]]'
        label: 'An' 
    styles:
      name:
        - justify-self: start
        - top: 0%
        - left: 0%
        - line-height: 4em
        - padding-left: 10px
        - position: relative
      icon:
        - top: -20%
        - left: -30%
        - position: relative
      state:
        - top: 0%
        - left: -30%
        - line-height: 2em
        - position: relative
      label:
        - justify-self: start
        - padding-bottom: 10px
        - padding-left: 10px
      card:
        - font-family: Verdana
        - font-weight: 450
        - font-size: 1.4em
        - border-radius: 0.8em
        - transition: none
        - box-shadow: >
            [[[ return (entity.state === variables.var_1) ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]
        - color: >
            [[[ return (entity.state === variables.var_1) ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
        - background-color: >
            [[[ return (entity.state === variables.var_1) ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]
 

[Basti84 (Bastian Seidel)]

Hello Marius,
thank you very much for your suggestion. I used your solution for my blinds buttons.

Button:

                - type: 'custom:button-card'
                  entity: cover.tradfri_blind_office_window_left
                  template: base_2x2_blinds
                  name: 'Jalousien Offen'
                  show_state: true
                  variables:
                    var_1: 'scene_0'
                    var_min: 75
                    var_max: 100
                  gridrow: 2
                  gridcol: 2 / 4
                  
                  hold_action:
                    action: more-info
                    entity: group.window_blinds_office

                  tap_action:
                    action: call-service
                    service: input_text.set_value
                    service_data:
                      value: '[[[ return variables.var_1 ]]]'
                      entity_id: input_text.variable_text_2

                  state_display: '[[[ return entity.attributes.current_position + "%" ]]]' 

Template:

  base_2x2_blinds:
    aspect_ratio: 1/1
    show_state: false
    show_icon: true
    icon: mdi:blinds-open
    show_label: false
    variables:
      var_1: null
      var_min: 75
      var_max: 100
    size: 40%
    color: '#c4c4c4'
    state:
      - value: '[[[ return variables.var_1 ]]]'
        label: 'An' 
    styles:
      name:
        - justify-self: start
        - top: 0%
        - left: 0%
        - line-height: 4em
        - padding-left: 10px
        - position: relative
      icon:
        - top: -20%
        - left: -30%
        - position: relative
        - color: >
            [[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? '#148eff' : 'rgba(255, 255, 255, 0.2)'; ]]]
      state:
        - top: 0%
        - left: -30%
        - line-height: 2em
        - position: relative
      label:
        - justify-self: start
        - padding-bottom: 10px
        - padding-left: 10px
      card:
        - font-family: Verdana
        - font-weight: 450
        - font-size: 1.4em
        - border-radius: 0.8em
        - transition: none
        - box-shadow: >
            [[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]
        - color: >
            [[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
        - background-color: >
            [[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]

[Mariusthvdb (Marius)]

fwiw, here’s what they do in my config:

[Vahaldor]

Hi folks, a quick question. Different icon by state on/off works with no problem, but when I have different states “home” “work” it does not work. Any ideas?

state:
  - value: biocenter
    icon: 'mdi:biohazard'
  - value: away
    icon: 'mdi:account-question'
    styles:
      card:
        - background: Red
  - value: 'on'

The apostrof ' stays only with states off/on, the editor cuts off it when I need to specify the other states.

[ovidiudr (Ovidiu)]

Thank you for your help. It is working now

The only thing I noticed is that it doesn’t reconnect to Home Assistant if I unplug the Air Purifier to move it into a different room… Did you experienced the same issue ? To fix it I have to restart Home Assistant…

[DavidFW1960 (David)]

Check the actual state in dev-tools…

[Mariusthvdb (Marius)]

@Vahaldor

The apostrof ' stays only with states off/on

not sure if you mean this, but you only need to quote these yaml values when they are booleans, see YAML - Home Assistant

of course, when using templates, additional quoting rules apply.

In any case, the icons don’t need quoting here.

[Vahaldor]

Special locations/state of a tracker is case-sensitive. That’s the problem. Boolean on/off is not apparently.

[kongo09]

@ovidiudr

Did you experienced the same issue ?

For me, it keeps loosing the connection al the time. I guess that’s down to the bad implementation of Philips.

[Mariusthvdb (Marius)]

there’s an awful lot of haze in my head right now, I cant figure out how to get the deviceID to the frontend, showing it on a button-card… please help me out:

    name: |
      [[[ return 'UserID: ' + hass.user.id + "<br>" +
                 'Username: ' + hass.user.name + "<br>" +
                 'Owner: ' + hass.user.is_owner + "<br>" +
                 'Admin: ' + hass.user.is_admin + "<br>" +
                 'DeviceID: ' + ???;
      ]]]

I need it to be a template, and not a hard coded deviceID of a single device.

[RomRider]

DeviceID as in browser_mod device ID?
If so, you could try: 'DeviceID: ' + localStorage['lovelace-player-device-id']

[Mariusthvdb (Marius)]

@RomRider

• localStorage[‘lovelace-player-device-id’]

yep, that works, thanks! new to me, the ‘localStorage[‘lovelace-player-device-id’]’ technique. Could you explain some more, or point me to the docs on that?

is this something we can throw at the inspector JS > too for example?

EDIT
answer yes we can…

but what about custom-header/src/template-variables.js at 11537f553819077934034224afb61af1f21964fe · maykar/custom-header · GitHub

is that something we can show too? other than window.location.pathname or window.location.href?
@romrider would you accept a FR to add the import { getLovelace } from 'custom-card-helpers';

allowing this

  const lovelace = getLovelace();
  const current_view = lovelace && lovelace.config.views[lovelace.current_view] != undefined;
  vars.viewIndex = lovelace ? lovelace.current_view : '';
  vars.viewTitle = current_view ? lovelace.config.views[lovelace.current_view].title || '' : '';
  vars.viewPath = current_view ? lovelace.config.views[lovelace.current_view].path || '' : '';

to the Button-card?

been able to find this so far:

    name: |
      [[[ return 'UserID: ' + hass.user.id + "<br>" +
                 'Username: ' + hass.user.name + "<br>" +
                 'Owner: ' + hass.user.is_owner + "<br>" +
                 'Admin: ' + hass.user.is_admin + "<br>" +
                 'DeviceID: ' + localStorage['lovelace-player-device-id']; ]]]
    label: |
      [[[ return 'Version: ' + hass.config.version + "<br>" +
                 'Href: ' + window.location.href + "<br>" +
                 'Path: ' + window.location.pathname + "<br>" +
                 'UserAgent: ' + navigator.userAgent + "<br>" +
                 'Entity id: ' + window.browser_mod.entity_id; ]]]

‘hass.user’ wil show me nothing though, not even in inspector to walk the path of the Object.

[clemalex]

It’s a good start (thanks to @Mattias_Persson )
It still remains to manage the open / close and closing states (when i have more time)

it’s to give ideas

Code

type: 'custom:button-card'
show_label: false
show_state: false
show_name: false
show_icon: false
entity: input_boolean.hacf
aspect_ratio: 1/1
styles:
  name:
    - padding: 0 0 200px 0
  card:
    - background-color: '#fcc52b'
    - border-radius: 10%
    - box-shadow: none
    - transition: none
    - border: '5px #d6a211 solid'
  custom_fields:
    portail:
      - left: 5%
      - bottom: 20%
      - height: 100%
      - width: 100%
      - position: absolute
custom_fields:
  portail: |
    [[[
      const state = entity.state === 'on' ? 'animate' : null;
      this.style.setProperty("--speed", states['input_number.hacf'].state + "s");
      return `
        <svg viewBox="0 0 25 25">
          <style>
            @keyframes animate {
              0% {
                transform: translateX(0%);
              }
              
              100% {
                transform: translateX(61%);
              }
            }
            .animate {
              animation: animate var(--speed) linear;
              transform-origin: center;
              animation-fill-mode: forwards; 
            }
          </style>
          <path class="${state}" fill="#383e42" d="m 4.3961394,12.259153 v 10.289062 h 0.017578 0.5976562 0.6972656 a 0.3815606,0.3804146 0 0 0 -0.234375,0.351563 0.3815606,0.3804146 0 0 0 0.3828125,0.378906 0.3815606,0.3804146 0 0 0 0.3808594,-0.378906 0.3815606,0.3804146 0 0 0 -0.234375,-0.351563 h 9.1074217 a 0.3815606,0.3804146 0 0 0 -0.236328,0.351563 0.3815606,0.3804146 0 0 0 0.38086,0.378906 0.3815606,0.3804146 0 0 0 0.382812,-0.378906 0.3815606,0.3804146 0 0 0 -0.236328,-0.351563 h 4.136719 V 12.276731 H 4.4000457 c -8.089e-4,-0.006 -0.00309,-0.01158 -0.00391,-0.01758 z m 0.9472656,0.427734 h 0.6425782 c 0.02381,0 0.042969,0.01508 0.042969,0.03516 v 9.175781 c 0,0.02008 -0.019159,0.03516 -0.042969,0.03516 H 5.343405 c -0.02381,0 -0.042969,-0.01508 -0.042969,-0.03516 v -9.175781 c 0,-0.02008 0.019159,-0.03516 0.042969,-0.03516 z m 1.5761719,0 H 7.562155 c 0.02381,0 0.042969,0.01508 0.042969,0.03516 v 9.175781 c 0,0.02008 -0.019159,0.03516 -0.042969,0.03516 H 6.9195769 c -0.02381,0 -0.042969,-0.01508 -0.042969,-0.03516 v -9.175781 c 0,-0.02008 0.019159,-0.03516 0.042969,-0.03516 z m 1.5761719,0 h 0.642578 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01917,0.03516 -0.04297,0.03516 h -0.642578 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01916,-0.03516 0.04297,-0.03516 z m 1.5761722,0 h 0.642578 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01916,0.03516 -0.04297,0.03516 h -0.642578 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01915,-0.03516 0.04297,-0.03516 z m 1.576172,0 h 0.642578 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01915,0.03516 -0.04297,0.03516 h -0.642578 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01917,-0.03516 0.04297,-0.03516 z m 1.576172,0 h 0.642578 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01916,0.03516 -0.04297,0.03516 h -0.642578 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01916,-0.03516 0.04297,-0.03516 z m 1.576171,0 h 0.642579 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01916,0.03516 -0.04297,0.03516 h -0.642579 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01916,-0.03516 0.04297,-0.03516 z m 1.576172,0 h 0.642578 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01917,0.03516 -0.04297,0.03516 h -0.642578 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01915,-0.03516 0.04297,-0.03516 z m 1.576172,0 h 0.642578 c 0.02381,0 0.04297,0.01508 0.04297,0.03516 v 9.175781 c 0,0.02008 -0.01917,0.03516 -0.04297,0.03516 H 17.95278 c -0.02381,0 -0.04297,-0.01508 -0.04297,-0.03516 v -9.175781 c 0,-0.02008 0.01917,-0.03516 0.04297,-0.03516 z"/>
          <path fill="#676767" d="m 2.2402344,11.082031 c -0.47811,-0.0016 -0.9269927,0.191384 -1.29296878,0.441407 -0.44114199,0.301935 -0.6160325,0.489725 -0.6171875,0.970703 V 23.195312 H 4.1972656 V 12.28125 C 4.1899656,12.2272 4.1834863,12.17258 4.1601562,12.123047 3.9143242,11.601282 2.8994824,11.083631 2.2402344,11.082031 Z m 19.3691406,0 c -0.478109,-0.0016 -0.926994,0.191384 -1.292969,0.441407 -0.36603,0.250524 -0.541711,0.431711 -0.59375,0.757812 v 10.914062 h 3.859375 V 12.546875 c -6.1e-4,-0.139314 0.0089,-0.292989 -0.05273,-0.423828 -0.245832,-0.521765 -1.260673,-1.039416 -1.919922,-1.041016 z M 2.28125,12.152344 c 0.230583,0.01324 0.4569784,0.117469 0.5996094,0.294922 0.115214,0.143552 0.099029,0.304904 0.099609,0.470703 v 9.216797 H 1.5625 V 12.865234 C 1.563116,12.705262 1.5443262,12.535103 1.6601562,12.398438 1.8151103,12.215685 2.050666,12.139102 2.28125,12.152344 Z m 19.369141,0 c 0.230583,0.01324 0.456977,0.117469 0.599609,0.294922 0.11522,0.143552 0.09903,0.304904 0.09961,0.470703 v 9.216797 h -1.417968 v -9.269532 c 6.2e-4,-0.159972 -0.01622,-0.330131 0.09961,-0.466796 0.154955,-0.182753 0.388559,-0.259336 0.619141,-0.246094 z M 2.3183594,19.636719 c -0.05434,-0.0068 -0.11603,-0.0019 -0.1875,0.01367 -0.386924,0.298227 -0.1005985,0.739547 0.2265625,0.648437 0.312142,-0.08621 0.3413325,-0.614782 -0.039063,-0.662109 z m 19.3710936,0 c -0.05434,-0.0068 -0.117983,-0.0019 -0.189453,0.01367 -0.386924,0.298227 -0.100597,0.739547 0.226562,0.648437 0.312143,-0.08621 0.343289,-0.614782 -0.03711,-0.662109 z"/>
        </svg>
      `;
    ]]]

[benm7 (Ben M)]

Is it possible to embed a button within a button? I am building a card to display car information and I want to put a button at the very bottom left which opens (more-info) a group of petrol stations showing all petrol stations within that group.

[eximo84]

Yeah, add a custom_field to your main button. Add new buttons and values into the custom_fields

Then on your main card add the grid-template-areas as your custom_fields. Example with lots of values so ignore most. I normally use templates.

aspect_ratio: 1/1
type: 'custom:button-card'
custom_fields:
  currentrate_btn:
    card:
      type: 'custom:button-card'
      aspect_ratio: 2/1
      entity: sensor.octopus_agile_current_rate
      show_name: true
      show_state: true
      name: Current Rate
      styles:
        grid:
          - grid-template-areas: '"n" "s"'
          - grid-template-rows: 50%
          - grid-template-columns: 100%
        card:
          - border-radius: 0
          - box-shadow: none
        icon:
          - width: 50%
          - color: var(--paper-item-icon-color)
        state:
          - color: var(--paper-item-icon-color)
          - font-size: 10pt
          - justify-self: start
          - margin-left: 10%
          - margin-bottom: 10px
        name:
          - justify-self: start
          - margin-left: 10%
          - font-weight: bold
          - padding: 0
          - margin-top: 10px
      state:
        - operator: '>='
          value: 30
          styles:
            card:
              - background-color: '#FF5722'
              - color: white
            icon:
              - color: white
            state:
              - color: white
        - operator: '>='
          value: 20
          styles:
            card:
              - background-color: '#FFC107'
              - color: white
            icon:
              - color: white
            state:
              - color: white
        - operator: '>='
          value: 5
          styles:
            card:
              - background-color: '#4CAF50'
              - color: white
            icon:
              - color: white
            state:
              - color: white
        - operator: '>='
          value: 0
          styles:
            card:
              - background-color: '#2196F3'
              - color: white
            icon:
              - color: white
            state:
              - color: white
  nextrate_btn:
    card:
      type: 'custom:button-card'
      entity: sensor.octopus_agile_next_rate
      aspect_ratio: 2/1
      name: Next Rate
      show_name: true
      show_state: true
      styles:
        grid:
          - grid-template-areas: '"n" "s" '
          - grid-template-rows: 50%
          - grid-template-columns: 100$
        card:
          - border-radius: 0
          - box-shadow: none
        icon:
          - width: 50%
          - color: var(--paper-item-icon-color)
        state:
          - color: var(--paper-item-icon-color)
          - font-size: 10pt
          - justify-self: start
          - margin-left: 10%
          - margin-bottom: 10px
        name:
          - justify-self: start
          - margin-left: 10%
          - font-weight: bold
          - padding: 0
          - margin-top: 10px
      state:
        - operator: '>='
          value: 30
          styles:
            card:
              - background-color: '#FF5722'
              - color: white
            icon:
              - color: white
            state:
              - color: white
        - operator: '>='
          value: 20
          styles:
            card:
              - background-color: '#FFC107'
              - color: white
            icon:
              - color: white
            state:
              - color: white
        - operator: '>='
          value: 5
          styles:
            card:
              - background-color: '#4CAF50'
              - color: white
            icon:
              - color: white
            state:
              - color: white
        - operator: '>='
          value: 0
          styles:
            card:
              - background-color: '#2196F3'
              - color: white
            icon:
              - color: white
            state:
              - color: white
styles:
  grid:
    - grid-template-areas: '"currentrate_btn" "nextrate_btn"'
    - grid-template-rows: 50% 50%
    - grid-template-columns: 100%
  card:
    - padding: 0
    - margin: 0
triggers_update:
  - sensor.octopus_agile_current_rate
  - sensor.octopus_agile_next_rate

[Mariusthvdb (Marius)]

this is a first for me, but I am trying to check an attribute without an underscore in the slug and I dont know how to do that…

this is the correct jinja

{% set change = 'ahead' if is_state_attr('sensor.dst','dst active',true)
                            else 'back' %}`

note the unquoted true which is correct…

  change: >
    [[[ return states['sensor.dst'].attributes.[dst active] == true ? 'ahead' : 'back'; ]]]

doesn’t show anything, nor does 'dst active'
please help me finding the correct syntax for this?

second question: Id like the button to spin in the related direction, mdi:update clockwise when ‘ahead’, mdi:history anti-clockwise when ‘back’

haven’t found an example doing that yet, so please let me know if that can be done?

—EDIT—

mere guessing made me find it:

[[[ return states['sensor.dst'].attributes['dst active'] == true ? 'ahead' : 'back'; ]]]

figured if we didn’t need the . between states and [, we might not need it between attributes and [ either…

ok, now where can I read about that syntax?
still searching for the spin direction

[Getslow]

Hi everyone,

I’ve got a question regarding the sizing of the custom button card:
I try to define the the layout of my button card in a relative manner so that it scales nicely (still a work in progress):

button_template:
  variables:
    svg_icon: null
    corner:   null
  name:               "[[[ return entity.attributes.friendly_name ]]]"
  color:              auto
  color_type:         icon
  aspect_ratio:       1/1
  state:              
      - value: 'on'
        styles:
          card:
            - background-color: var(--button-card-on-background)
            - color: var(--button-card-on-text-color) 
      - value: 'unavailable'
        styles:
          icon:
            - color: var(--button-card-disabled-text-color)
          name:
            - color: var(--button-card-disabled-text-color)

  # lock:               
  #   enabled:            false
  #   duration:           5
  #   unlock:             tap
  show_last_changed:  false


  custom_fields:  
    svg_icon: "[[[ return variables.svg_icon ]]]"
    corner:   ""
    corner_2: ""
    cust_1:   "[[[ return entity.state ]]]"
    cust_2:   ""
  
  # Styles of the card
  styles:

    # Card style itself
    card:
      - padding:            10%                         # Padding between card edge and contents
      - font-size:          12px                        # Font pixel size of the card, actual fonts are based relative to this value
      - text-transform:     capitalize
      - font-family:        -apple-system, system-ui, BlinkMacSystemFont
      - border-radius:      var(--button-card-border-radius)
      - background-color:   var(--button-card-background-color)
      - color:              var(--button-card-text-color)
      - backdrop-filter:    blur(20px)
    
    icon:
      - transform:        scale(1.5,1.5)
      - top:              -20%
      - left:             2%
      - width:            35%
      - position: absolute
      - opacity: >
              [[[ return variables.svg_icon == null ? 1 : 0; ]]]

    # Properties of the entity name text
    name:
      - font-size:          1.20em    # Text size of the entity name (relative to card font size)
      - font-weight:        bold
      - top:                60%
      - left:               10.1%
      - position:           absolute
      - text-align:         left
      - width:              80%

    # Lock properties
    # lock:
    #   - color: var(--button-card-lock-color)

    # Properties of the custom fields
    custom_fields:
      svg_icon:
        - top:                  11.5%
        - left:                 11.5%
        - width:                35%
        - position:             absolute

      corner: 
        - top:                  11.5%
        - right:                8%
        - max-width:            35%     # Max width to prevent text from overlapping with icon
        - padding-left:         0.5em   # Add some space between rounded edge and the text
        - padding-right:        0.5em   # Add some space between rounded edge and the text
        - position:             absolute
        - font-size:            1em     # Font size relative to card font size
        - font-weight:          bold
        - text-align:           middle
        - color:                var(--button-card-corner-on-text-color)
        - border-radius:        1em   # Should be half the height for a round edge
        - opacity:              0     # Make it invisible by default
        - background-color:     var(--button-card-corner-background-color)
        - line-height:          2em
        - height:               2em   # Must be equal to the line-height

      corner_2:
        - top:                  25%
        - right:                8%
        - position:             absolute
        - color:                var(--button-card-corner-text-color)

      cust_1:
        - top:                  75%
        - left:                 10.1%
        - text-align:           left
        - position:             absolute
        - font-weight:          bold
        - color:                var(--button-card-cust-1-text-color)

      cust_2:
        - top:                  70%
        - right:                10.1%
        - text-align:           right
        - position:             absolute
        - color:                var(--button-card-cust-2-text-color)

But when I load it on my phone and laptop, I get different presentations:
Laptop:

Phone:

Do you have any clue how I can make the layout of these cards the same?

[RomRider]

It’s not different, just the font size is and the font size is never relative to the parent element. That’s how CSS works.