storage_card.yaml

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.internal_available_space
    show_icon: false
    name: Internal Storage
    styles:
      card:
        - border-radius: 20px
        - border-style: none
        - box-shadow: 0px 0px 10px -9px black
      grid:
        - grid-template-areas: '"icon_cells icon_cells" "n n" "value value_2"'
        - grid-template-columns: min-content 1fr
        - grid-template-rows: min-content min-content
      name:
        - justify-self: start
        - align-self: start
        - font-size: 90%
        - font-weight: bold
        - margin-left: 15px
        - margin-top: 5px
      custom_fields:
        icon_cells:
          - justify-self: start
          - margin-top: 12px
          - margin-left: 15px
        value:
          - justify-self: start
          - align-self: start
          - font-size: 60%
          - font-weight: normal
          - margin-right: 17px
          - margin-left: 16px
          - margin-top: 15px
          - filter: opacity(70%)
        value_2:
          - justify-self: end
          - align-self: start
          - font-size: 60%
          - font-weight: normal
          - margin-right: 17px
          - margin-left: 17px
          - margin-top: 15px
          - filter: opacity(70%)
    custom_fields:
      icon_cells: |
        [[[
          return `<ha-icon
            icon="ssb:hard-drive"
            style="width: 25px; height: 25px; color: auto;">
            </ha-icon> 
           `
        ]]]
      value: |
        [[[
          return `<span> 
           ${states['sensor.internal_available_space'].state}B Free</span>
           `
         ]]]
      value_2: |
        [[[
          return `<span> 
           2.1GB</span>
           `
         ]]]
  - type: custom:bar-card
    height: 10px
    color: '#2192FF'
    entities:
      - entity: sensor.disk_use_percent
    positions:
      name: 'off'
      icon: 'off'
      indicator: 'off'
      minmax: 'off'
      title: 'off'
      value: 'off'
    style: |-
      .contentbar-direction-right {
         flex-direction: column;
      }
      bar-card-card {
          border-style: none;
      }
      bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 15px;
      } ha-card { 
          background-color: transparent; 
          box-shadow: none; 
          border-style: none;
          margin-top: -21px;
          margin-left: -2px
          margin-bottom: 0px;
      }
card_mod:
  style: |
    ha-card {
      border-radius: 20px;
      border-style: none;
      box-shadow: 0px 0px 10px -9px black;
    }