🔹 Card-mod - Add css styles to any lovelace card

Scrollable markdown

Shows scrollbar when needed:

изображение

изображение

code
  - type: markdown
    content: |
      first
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      last
    card_mod:
      style: |
        ha-markdown {
          max-height: 200px;
          overflow-y: auto;
        }

Thanks to “modern design” huge round corners we see a glitch for the scrollbar in corners.
Another example fixes this:
image

code
  - type: markdown
    content: |
      first
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      last
    card_mod:
      style:
        ha-markdown $: |
          ha-markdown-element p {
            max-height: 210px;
            overflow-y: auto;
            background-color: rgba(0,255,0,0.2);
          }
        .: |
          ha-markdown {
            padding-right: 4px !important;
          }
4 Likes

i solved!! thx you :innocent:

1 Like

@ASNNetworks

Which element do you wish to hide?
A particular tab?

yes, a nice mod indeed. using this on embedded markdowns my self, adding a nice line for the content to scroll under:

type: custom:hui-element
card_type: markdown
card_mod:
  style: |
    ha-card.type-markdown {
      box-shadow: none;
      border-top: 1px groove var(--divider-color);
      overflow-y: scroll;
      height: 300px;
    }
content: >

believe we had to tie in to the markdown card specifically, because otherwise the mod would be applied to other cards in the stack as well

btw, Ive Neve been able to discover the difference between ‘scroll’ and ‘auto’ in these configs, nor on the example pages on W3…
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_overflow-y&preval=auto

Hi, thanks for reaching out! So I’m not trying hide any tab, but I want to make the tab-bar element sticky. I want to add the following code to this line:

Change this:

:host {
    display: block;
}

To this:

            :host {
                display: block;
                z-index: 999;
                position: sticky;
                top: 0px;
                background: var(--primary-color);
            } 

So I want to add the four extra lines under display. Using inspect element this above code works, however I don’t know how to use it with card_mod. This doesn’t work:

        card_mod:
          style: |
            :host {
                display: block;
                z-index: 999;
                position: sticky;
                top: 0px;
                background: var(--primary-color);
            } 

So I think I need to traverse the DOM, which I need help with.

Styling custom:tabbed-card

The card is documented here.
Some basic styling may be done by the card’s options, some - by card-mod.


Note (11.04.23): some stylings stopped working after 2023.4. Try this workaround to fix:
instead of:

        card_mod:
          style:
            tabbed-card $: |
              ...... {

use this:

        card_mod:
          style:
            tabbed-card:
              $: |
                ...... {

Colored labels & icons (w/o conditions):

изображение

code
  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          <<: &ref_card
            type: entities
            entities:
              - sun.sun
        attributes:
          label: label 1
        styles:
          '--mdc-theme-primary': red
          '--mdc-tab-text-label-color-default': red
          '--mdc-tab-color-default': red
      - card:
          <<: *ref_card
        attributes:
          label: label 2
        styles:
          '--mdc-theme-primary': orange
          '--mdc-tab-text-label-color-default': orange
          '--mdc-tab-color-default': orange
      - card:
          <<: *ref_card
        attributes:
          label: label 2
        styles:
          '--mdc-theme-primary': green
          '--mdc-tab-text-label-color-default': green
          '--mdc-tab-color-default': green

Colored labels & icons (conditions may be added):

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) ha-icon $: |
        ha-svg-icon {
          color: orange;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          color: red !important;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Using standard theme variables for labels & icons:
изображение

code
type: custom:tabbed-card
styles:
  '--mdc-theme-primary': unset
  '--mdc-tab-text-label-color-default': var(--secondary-text-color)
  '--mdc-tab-color-default': var(--paper-item-icon-color)
attributes:
  icon: mdi:circle
tabs:
  - card:
      <<: &ref_card
        type: entities
        entities:
          - sun.sun
    attributes:
      label: label 1
  - card:
      <<: *ref_card
    attributes:
      label: label 2
  - card:
      <<: *ref_card
    attributes:
      label: label 3

Hilight icons on hover:

Untitled

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:hover {
        --mdc-theme-primary: red;
        --mdc-tab-color-default: red;
      }  
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle

Change an underline’s color:

изображение

code
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab:
            $:
              mwc-tab-indicator $: |
                .mdc-tab-indicator__content--underline {
                  border-color: red !important;
                }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            <<: &ref_card
              type: entities
              entities:
                - sun.sun
          attributes:
            label: label 1
        - card:
            <<: *ref_card
          attributes:
            label: label 2
        - card:
            <<: *ref_card
          attributes:
            label: label 3

Colored tab’s background:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(1) $: |
        .mdc-tab {
          background: red !important;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab {
          background: yellow !important;
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab {
          background: lightgreen !important;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <:: *ref_card
      attributes:
        label: label 3

Hilight an active tab’s background:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background: yellow !important;
          }
          .mdc-tab--active {
            background: lightgreen !important;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Tabs with background images:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab {
        background-size: 100% 100%;
      }
      mwc-tab:nth-child(1) {
        background-image: url("/local/images/test/9colors.jpg");
      }
      mwc-tab:nth-child(2) {
        background-image: url("/local/images/test/blue_low_2.jpg");
      }
      mwc-tab:nth-child(3) {
        background-image: url("/local/images/test/6colors.jpg");
      }
card:
  type: custom:tabbed-card
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
    - card: *ref_card
    - card: *ref_card

With inner padding:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background-size: 100% 100% !important;
          }
      mwc-tab:nth-child(1) $: |
        .mdc-tab {
          background-image: url("/local/images/test/9colors.jpg") !important;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab {
          background-image: url("/local/images/test/blue_low_2.jpg") !important;
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab {
          background-image: url("/local/images/test/6colors.jpg") !important;
        }
      .: |
        mwc-tab {
          padding: 4px;
        }
card:
  type: custom:tabbed-card
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
    - card: *ref_card
    - card: *ref_card

Align icons vertically with labels:

Not needed since v.0.4

Currently (v0.3.1) icons are misaligned; hopefully this will be fixed in the next revision (issue 1, issue 2).
The example contains 2 cards - styled (aligned) & default (misaligned).

изображение

code
type: vertical-stack
cards:
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab: |
            ha-icon {
              display: inline-flex;
            }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            <<: &ref_card
              type: entities
              entities:
                - sun.sun
          attributes:
            label: label 1
        - card:
            <<: *ref_card
          attributes:
            label: label 2
  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          <<: *ref_card
        attributes:
          label: label 1
      - card:
          <<: *ref_card
        attributes:
          label: label 2

Narrow tabs w/o labels:

image

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: var(--mdc-icon-size) !important;
          }
    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      } 
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-6-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-7-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-8-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-9-circle

Labels “caps lock off”:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab__text-label {
            text-transform: none;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: Label 1
    - card:
        <<: *ref_card
      attributes:
        label: Label 2
    - card:
        <<: *ref_card
      attributes:
        label: Label 3

Labels: font-size, text wrapping:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 10px;
          white-space: pre;
        }
      mwc-tab:
        $: |
          .mdc-tab__text-label {
            text-transform: none;
          }
        .: |
          mwc-tab ha-icon {
            display: inline-flex;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: Label 1
    - card:
        <<: *ref_card
      attributes:
        label: |-
          Some
          long long label
          !!!
    - card:
        <<: *ref_card
      attributes:
        label: Label 3

Hidden tab:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:nth-of-type(2) {
        display: none;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Disabled tab:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:nth-of-type(2) {
        pointer-events: none;
        --mdc-tab-text-label-color-default: var(--disabled-color);
        --mdc-tab-color-default: var(--disabled-color);
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

“Vivid” tabs:
These changes are also discussed here & here.
Below a variant for the HA 2023.2.3 default theme (border-radius: 12px, borders, no shadows); this may be also rewritten to the “old pre 2022.11 style” (shadows, no borders).

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab {
        background: var(--ha-card-background, var(--card-background-color, white) );
        border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
        border-width: 1px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-style: solid;
        overflow: hidden;
      }
      section article > * {
        --ha-card-border-radius: 0px 0px 12px 12px;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Tabs on the bottom:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Same + “vivid” tabs:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
        .: |
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Sticky “vivid” tabs:

tab

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab-bar {
        position: sticky;
        position: -webkit-sticky;
        top: 0; /*var(--header-height); */
        display: block;
        z-index: 999;
      }
      mwc-tab {
        background: var(--ha-card-background, var(--card-background-color, white) );
        border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
        border-width: 1px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-style: solid;
        overflow: hidden;
      }
      section article > * {
        --ha-card-border-radius: 0px 0px 12px 12px;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
      attributes:
        label: label 1
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 2
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 3

Sticky “vivid” bottom tabs:

Untitled Project111111111111

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
             }
        .: |
          mwc-tab-bar {
            position: sticky;
            position: -webkit-sticky;
            bottom: 4px;
            display: block;
            z-index: 999;
          }
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }          
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
      attributes:
        label: label 1
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 2
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 3

Additional info in tabs:

How to replace a tab’s name with some text:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 0px;
        }
        .mdc-tab__text-label:after {
          content: "New info";
          font-size: initial;
          text-transform: none;
          display: block;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - card: *ref_card
      attributes:
        label: dummy
    - card: *ref_card
      attributes:
        label: Label 3

How to add a templated text for 2 or more tabs:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(n+2):
        $: |
          .mdc-tab__text-label {
            font-size: 0px;
          }
          .mdc-tab__text-label:after {
            font-size: 10px;
            text-transform: none;
            display: block;
          }
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label:after {
          content: "Zone: {{states('zone.home')}}";
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab__text-label:after {
          content: "{{states('sun.sun')}}";
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - &ref_tab
      card:
        <<: *ref_card
      attributes:
        label: dummy
    - *ref_tab

How to add a multiline text:

изображение

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 0px;
        }
        .mdc-tab__text-label:after {
          content: "New info\A New info";
          font-size: 8px;
          text-transform: none;
          white-space: pre;
          display: block;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - card: *ref_card
      attributes:
        label: dummy
    - card: *ref_card
      attributes:
        label: Label 3

Adding images instead of icons:
image

Removing “on hover” effect:
image


Tested in HA 2023.2.2, Chrome + Win10, iOS Companion app (iOS 15.7.3).


more examples

8 Likes

Thank you so much! I managed to mix and match to create a sticky bar at the bottom! One final question, would it be possible to force the bar to fit all content? When using on mobile, I noticed the tabs are spread out and I need to scroll. I want the bar to force fit all tabs in the view, so I see all tabs without needing to scroll.

Do you mean this?
изображение
Probably your options are:
– set a scale to 50% (or any <100%) on the Company App;
– decrease font-size, remove icons - only for a mobile client.

I am trying to remove borders from chips but not sure what’s going wrong

    card_mod:
      style: |
        ha-card {
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }

thanks - that worked a charm!

This is what I mean: if the window is wider, all tabs fit in the view:

msedge_6zbj7T4Qzr

But at a certain width, the tabs don’t fit anymore. I need to scroll to be able to see the last tab.
msedge_ZL6aSxQXgY

So I’m looking for a way to fit all tabs in the view, there is plenty of space around the icons anyway, so I don’t see a reason why it wouldn’t fit.

Do not have access to PC.
Try yourself to change margins/paddings by code Inspector.
Now you know how to access elements, probably will manage to style it.
Post here your results, I will check them and probably will add them to my post about this card.

are those tabs on the tabbed-card? the look very much like the icon tabs in the regular HA header bar.

So I managed to do this with inspect element, by changing min-width to 40px, which works great!
msedge_GEVhsV15Vf

I tried using this with card_mod with different variations, but couldn’t make it work. I think I’m missing something there.

Yes correct, using only icon and no labels get this look. Also very cool each active icon can have its own color.

Ok, will check it some day.

1 Like

before installing, can I ask how responsive the card is?
does it load swiftly and how does it manage the tabs.
is it comparable with say the fold-entity-row?
I could imagine using card_mod on all of those tabs would be costly

considering it might be a nice replacement for the swiper card which seems to be abandoned and causing some styling/functionality issues

seems to be working nicely indeed! using only icons on those tabs, I had to change the selected_false color to

      styles:
        --mdc-theme-primary: gold
        --mdc-tab-color-default: orange

for it to work

wont be using the orange, but just following the docs on that :wink:

comparing that to the main view tab bar:

one can see the unselected tabs in the tabbed-card are a bit brighter than the unselected view tabs. maybe I can find the correct setting for that, though it takes a keen eye to notice.

setting minwidth to true using text labels didnt work though, still had to swipe with only 3 or 4 tabs.

1 Like

Yes, I have replaced some swiper elements inside my dashboard for tabbed-card myself. Mainly because I find selecting a tab is a lot more mobile friendly than swiping. Especially if there are like 4-5 options to choose from.

Updated the main post for this card.
Check this:

card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: var(--mdc-icon-size) !important;
          }
    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }

image