Add Custom Card on HomeAssistant

Enable SSH

1. Go to Configuration > Add-ons
2. Add-On Store button
3. Find Terminal & SSH
4. Click on Install
5. After installation is completed, we can toggle “Show in sidebar”
6. Go to Configuration page
   1. We can add authorized keys (sample below)
   2. Add port number in Network section
   3. Remember to click Save button
7. Go back to Info tab
8. Click on Start

apks: []
authorized_keys:
  - "ssh-rsa AA.........= workgroup\bforbenny@laptop"
password: ''
server:
  tcp_forwarding: false

Installing HACS

Follow the steps shown here, I am using Home Assistant OS

Download | HACS

Configuring HACS

Remember to clear browser cache before proceeding. Then follow the steps here

Initial Configuration | HACS

Install “button-card” from HACS

1. Go to HACS from side bar
2. Go to Frontend section
3. Click on Explore & Download Repositories button
4. Find and install button-card

How to use button-card

Template

Templates are configured in yaml configuration.

Edit any of the dashboard, on the ellipsis menu, pick Raw configuration editor

Sample template as below

button_card_templates:
  inkwell:
    show_name: false
    show_state: true
    extra_styles: |
      [[[ return `
        @keyframes pulse {
          5% {
            background-color: ${variables.color};
          }
        }
      `]]]
    styles:
      icon:
        - opacity: 0.7
        - color: '[[[ return variables.color ]]]'
        - filter: drop-shadow( 0 0 2px rgba(0, 0, 0, .7))
      state:
        - font-size: 1.5em
        - font-weight: bold
        - text-shadow: 0 0 6px black
        - overflow: visible
      card:
        - border: solid 3px gray
        - border-top: none
        - background: |
            [[[
              var level = entity.state;
              var color = variables.color;
              return `linear-gradient(to top, ${color}, ${color} ${level}%, rgba(255,255,255,0.12) ${level}%)`
            ]]]
        - animation: |
            [[[
              return (0 + entity.state) < 10
                ? 'pulse ease-in-out 1s infinite'
                : 'none'
            ]]]

Card

Back to edit dashboard, click on Add, then choose “Manual” at the bottom of the selection

Sample configuration below

type: custom:button-card
entity: sensor.printer-model
name: printer
color: gray
show_state: false
styles:
  card:
    - padding: 0 0 5px 0
  icon:
    - width: 100%
  state:
    - text-align: left
    - width: 100%
  grid:
    - grid-template-areas: '"i c m y k" "n s s s s"'
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - grid-template-rows: auto 1em
  custom_fields:
    k:
      - width: 80%
      - margin: auto
    c:
      - width: 80%
      - margin: auto
    m:
      - width: 80%
      - margin: auto
    y:
      - width: 80%
      - margin: auto
custom_fields:
  k:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.printer_model_black_part
      variables:
        color: black
  c:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.printer_model_cyan_part
      variables:
        color: cyan
  m:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.printer_model_magenta_part
      variables:
        color: magenta
  y:
    card:
      type: custom:button-card
      template: inkwell
      entity: sensor.printer_model_yellow_part
      variables:
        color: yellow