Combine Markdown and Entity card for Alarm Display

I am trying to figure out a card that would combine a markdown card with an entity card. Essentially what I want to do is have the 2 line alarm text displayed, and then when clicking on it, it would open up the info panel about my keypad. The envisalink integration supplies the alarm integration.

By itself, the sensor.alarm_keypad entity is pretty ugly, especially since the physical alarm display in 2 lines, and it shows it all as one continuous line.

image

Opening it up, gives me a lot of valuable information, which I want to still be able to access:

I was able to get this into a ‘nicer’ view, by making a markdown card like this, but it is NOT clickable, and I can’t bring up the details of sensor.alarm_keypad.

image

type: entity-filter
entities:
  - sensor.alarm_keypad
state_filter:
  - ''
card:
  type: markdown
  content: |
    <center> {{ states("sensor.alarm_keypad")[:16] }} </center>
    <center> {{ states("sensor.alarm_keypad")[16:] }} </center>
  style: |
    ha-card {
      font-family: monospace;
      font-size: 20px;
      line-height: 25px;
      border: solid 3px black;
    }

Any way where I can keep this markdown card (or something similar) and I can still click on it to bring up the sensor.alarm_keypad details?

You can feast your heart out with this one :slight_smile:
custom-cards/button-card: :sparkle: Lovelace button-card for home assistant (github.com)

Oh yes! That card! I had used it before but had forgotten that it could do labels and accomplish this. Finished result:

type: custom:button-card
color_type: icon
entity: sensor.alarm_keypad
show_name: false
show_icon: false
label: |
  [[[  
       var alpha = states['sensor.alarm_keypad'].state;
       return alpha.substr(0,16) + '<br>' + alpha.substr(16,32)
  ]]]
show_label: true
styles:
  label:
    - font-family: monospace
    - font-size: 20px
    - line-height: 25px
  card:
    - border: solid 3px black;