Create person card

[coasting24]

An example of how a template for a person card could look like. This is adopted from UI Minimalist, which also uses button_card as a base for its theming:

View:

          - type: custom:button-card
            template:
              - custom_card_person
            entity: person.name
            variables:
              hc_card_person_entity: entity.entity_id
              hc_card_person_use_entity_picture: false
              hc_card_person_icon: mdi:face-woman  # fapro:???
              hc_card_person_battery: #sensor.phone_battery_level
              hc_card_person_eta: #sensor.travel_time
              hc_address: #sensor.geocoded_location

Template:

custom_card_person.yaml

---
### Custom Card Person ###
custom_card_person:
  variables:
    hc_card_person_use_entity_picture: false
    hc_card_person_icon: "mdi:face-man"
    hc_address: ""
  triggers_update:
    - "[[[ return variables.hc_card_person_entity ]]]"
    - "[[[ return variables.hc_card_person_eta ]]]"
    - "[[[ return variables.hc_address ]]]"
  tap_action:
    action: "more-info"
  show_label: true
  show_name: true
  show_state: true
  label: >
    [[[
      let label = helpers.localize(entity)
      var eta = ""
      if (variables.hc_card_person_eta && entity.state != 'home'){
        eta = " | " + helpers.localize(states[variables.hc_card_person_eta]);
      }
      if (variables.hc_address){
        return helpers.localize(states[variables.hc_address]) + eta;
      }
      return label + eta
    ]]]
  name: "[[[ return entity.attributes.friendly_name ]]]"
  entity: "[[[ return variables.hc_card_person_entity; ]]]"
  icon: "[[[ return variables.hc_card_person_icon; ]]]"
  show_entity_picture: "[[[ return variables.hc_card_person_use_entity_picture ]]]"
  entity_picture:
    "[[[ return variables.hc_card_person_use_entity_picture ? entity.attributes.entity_picture\
    \ : null ]]]"

  styles:
    grid:
      - grid-template-areas: |
          "n i"
          "s s"
          "l l"
    card:
      - padding: 10px 15px 20px 15px
    icon:
      - width: >
          [[[
            return !variables.hc_card_person_use_entity_picture ? "22px" : "42px";
          ]]]
      - height: >
          [[[
            return !variables.hc_card_person_use_entity_picture ? "22px" : "42px";
          ]]]
      - color: var(--color-darkest-gray)
    img_cell:
      - height: 22px
      - width: 22px
      - background: var(--color-light-gray-card)
      - border-radius: 12px
      - padding: 10px
    state:
      - justify-self: start
      - align-self: end
      - color: var(--color-gold)
      - font-weight: 600
      - font-family: montserrat
      - font-size: 15px
    name:
      - justify-self: start
      - text-align: left
      - font-weight: 700
      - font-family: montserrat
      - font-size: 15px
    label:
      - justify-self: start
      - align-self: start
      - color: var(--color-dark-gray)
      - font-size: 12px
      - font-family: montserrat
      - font-weight: 500
    custom_fields:
      bat_info:
        - position: "absolute"
        - right: "6px"
        - top: "6px"
        - width: "25px"
        - height: "25px"

  custom_fields:
    bat_info: |
      [[[
        if(variables.hc_card_person_battery){
        const battery = Math.round(states[variables.hc_card_person_battery].state/1);
        const radius = 20.5; const circumference = radius * 2 * Math.PI;
        return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
        stroke=var(--color-gold) stroke-width="1" fill=var(--color-gold)
        style="transform: rotate(-90deg); transform-origin: 50% 50%;
        stroke-dasharray: ${circumference};
        stroke-dashoffset: ${circumference - battery / 100 * circumference};" />
        <text x="50%" y="60%" fill="white" font-size="16" font-weight= "bold"
        text-anchor="middle" alignment-baseline="middle">
        ${battery}<tspan font-size="10">%</tspan></text></svg>`;
        }
      ]]]