With tabbed-card labels always in uppercase

Configuration Frontend
1

Hi,

I am using a tabbed-card that is within a vertical stack card. Works fine but my labels such as Test show as TEST. Any way to fix this?

type: vertical-stack
cards:
  - type: markdown
    content: Rasperry Pi's
    card_mod:
      style: |
        ha-card {
          text-transform: none;
          border: none;
          border-bottom: none;
          box-shadow: none;
          border-radius: 10px 10px 0px 0px;
          background: transparent;
          font-size: 15px;
          text-align: center;
          padding: 5px;
          margin-bottom: 0px;
        }
  - type: custom:tabbed-card
    style: |
      ha-card {
        text-transform: none;
        background: transparent;
        border: 2px solid white;
        border-radius: 10px;
      }
      .tabbed-card-label {
        text-transform: none !important;
      }
    tabs:
      - attributes:
          label: Office
        card:
          type: vertical-stack
          cards:
            - type: entities
              entities:
                - entity: sensor.rpi_raspberrypi_rpi_cpu_use_raspberrypi
                  name: CPU Use
                - entity: sensor.rpi_raspberrypi_rpi_disk_used_raspberrypi
                  name: Disk Used
                - entity: sensor.rpi_raspberrypi_rpi_mem_used_raspberrypi
                  name: Memory Used
                - entity: sensor.rpi_raspberrypi_rpi_temp_raspberrypi
                  name: Temp
                - type: attribute
                  entity: sensor.rpi_raspberrypi_rpi_monitor_raspberrypi
                  attribute: ux_updates
                  name: Updates
                - type: attribute
                  entity: sensor.rpi_raspberrypi_rpi_monitor_raspberrypi
                  attribute: ux_release
                  name: Release
                - type: attribute
                  entity: sensor.rpi_raspberrypi_rpi_monitor_raspberrypi
                  attribute: ux_version
                  name: Version
              card_mod:
                style: |
                  ha-card {
                    text-transform: none;
                    border: 2px solid white;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
      - attributes:
          label: Bedroom
        card:
          type: vertical-stack
          cards:
            - type: entities
              entities:
                - entity: sensor.rpi_raspberrypi_rpi_cpu_use_raspberrypi_2
                  name: CPU Use
                - entity: sensor.rpi_raspberrypi_rpi_disk_used_raspberrypi_2
                  name: Disk Used
                - entity: sensor.rpi_raspberrypi_rpi_mem_used_raspberrypi_2
                  name: Memory Used
                - entity: sensor.rpi_raspberrypi_rpi_temp_raspberrypi_2
                  name: Temp
                - type: attribute
                  entity: sensor.rpi_raspberrypi_rpi_monitor_raspberrypi_2
                  attribute: ux_updates
                  name: Updates
                - type: attribute
                  entity: sensor.rpi_raspberrypi_rpi_monitor_raspberrypi_2
                  attribute: ux_release
                  name: Release
                - type: attribute
                  entity: sensor.rpi_raspberrypi_rpi_monitor_raspberrypi_2
                  attribute: ux_version
                  name: Version
              card_mod:
                style: |
                  ha-card {
                    text-transform: none;
                    border: 2px solid white;
                    box-shadow: none;
                    border-radius: 10px;
                    background: transparent;
                  }
2

You are describing some undesired behavior of a custom card - and posting a code with card-mod.
Check first without card-mod.
And specify a version of your HA and the tabbed/card since in 2025.5 the old tab element (which has capitals by default) was removed from HA and replaced with another element (and then tabbed-card was updated correspondingly).

3

image
image738×395 13.6 KB

image
image666×195 8 KB

Will try and remove the card-mod and see if that makes a difference.

thanks for offering to assist

4

The card has built in CSS style options. If you add --mdc-typography-button-text-transform: none Then the tab will reflect whatever you type as the label.

type: custom:tabbed-card
options: {}
styles:
   --mdc-typography-button-text-transform: none
tabs:
  - card:
      type: entity
      entity: sun.sun
    attributes:
      label: Sun

image
image1516×542 33.9 KB

5

Are you going with the first responder’s approach and remove card-mod as well? Wasn’t expecting such fast reply. Still trying to test on his suggestions

6

I agree with Ildar. This code from your post most likely not modifying the card’s CSS.

   style: |
      ha-card {
        text-transform: none;
        background: transparent;
        border: 2px solid white;
        border-radius: 10px;
      }
      .tabbed-card-label {
        text-transform: none !important;
      }

The example I gave you is the correct method.

Directly from the HACs instructions

Styling

This card tries to closely match home assistants default tab styles. You can override and apply additional styling to the card via provided material web components custom properties.

Default Custom Properties:

Name Default Description
--mdc-theme-primary --primary-text-color Color of the activated tab’s text, indicator, and ripple.
--mdc-tab-text-label-color-default rgba(225, 225, 225, 0.8) Color of an unactivated tab label. If you want transpareny on the unactivated tabs, you need to use an rgba value incorporating the 4th alpha channel.
--mdc-typography-button-font-size 14px Font size of the tab label. 
type: custom:tabbed-card
styles: # global styles applied to all tabs
  --mdc-theme-primary: yellow
  --mdc-tab-text-label-color-default: orange
tabs: ...
7

thank you because the tabs appearing in uppercase was annoying me.

8

The card is still set to capitalize Tabs via

.mdc-tab {text-transform: var(–mdc-typography-button-text-transform, uppercase);`

1 Like