type: custom:button-card
name: Mobile Subscription
custom_fields:
  gauge:
    card:
      type: gauge
      entity: sensor.processor_use
      name: Data Usage
  percent: >
    [[[ return `<ha-icon icon="mdi:cellphone-arrow-down" style="width: 16px;
    height: 16px; color: white;"></ha-icon>&nbsp;&nbsp;Data
    used:&nbsp;&nbsp;&nbsp;&nbsp; `+states['sensor.processor_use'].state + '
    Gb'   ]]]
  gb: >
    [[[ return `<ha-icon icon="mdi:transfer-down" style="width: 16px; height:
    16px; color: white;"> </ha-icon>&nbsp;&nbsp;Total data:&nbsp;&nbsp;&nbsp;`+
    ' 100 Gb'   ]]]
  mb: >
    [[[ return `<ha-icon icon="mdi:swap-vertical-bold" style="width: 16px;
    height: 16px; color: white;"> </ha-icon>&nbsp;&nbsp;Remaining: `+
    '&nbsp;&nbsp;&nbsp;89 Gb'  ]]]
styles:
  grid:
    - grid-template-areas: '"n n" "gauge percent" "gauge gb" "gauge mb"'
    - grid-template-columns: 30% 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
  name:
    - align-self: middle
    - justify-self: start
    - padding-left: 10px
  custom_fields:
    gauge:
      - padding-left: 10px
    percent:
      - align-self: middle
      - justify-self: start
      - padding-left: 30px
    gb:
      - align-self: middle
      - justify-self: start
      - padding-left: 30px
    mb:
      - align-self: middle
      - justify-self: start
      - padding-left: 30px