Tile card feature height

Tile card features have a height which is a CSS var --feature-height. This is set on the feature element itself, hui-card-feature, which is in shadow root of hui-card-features. Below is a step by step guide on using uix_style_path() to discover yaml selector to cross the shadow root for styling with UIX.

Step 1: find feature needing styling

Use your browser to inspect the DOM and find the relevant feature whose height you wish to style.

The screenshot below shows hui-card-feature and that it indeed sets --feature-height: 42px;.

Step 2: run uix_style_path()

With hui-card-feature selected in browser’s inspector, run uix_style_path($0) - uix_path() is shorthand for uix_style_path().

Step 3a: style tile card locally

From the uix_style_path() output take the 📝 Boilerplate UIX YAML and use to style tile card locally on dashboard.

📝 Boilerplate UIX YAML

uix:
  style:
    "hui-card-features $": |
      hui-card-feature {
        /* your styles for hui-card-feature */
      }

Tile card styling

type: tile
entity: light.bed_light
name:
  type: entity
vertical: false
features_position: bottom
grid_options:
  columns: 12
  rows: 1
features:
  - type: light-brightness
uix: # Included from Boilerplate UIX YAML, filling in desired styling
  style:
    "hui-card-features $": |
      hui-card-feature {
        --feature-height: 20px;
      }

Step 3b: style tile card via theme

From the uix_style_path() output take the 📝 Boilerplate Theme YAML and use to create a new theme or add to an existing theme already set up for UIX styling. If you already have a theme you would just take the uix-card-yaml: section.

Merging UIX styling

If you already have uix-card: theme section and need to migrate to uix-card-yaml you need to place any existing under the root key .:. For more information see Updating uix-<thing> variable to uix-<thing>-yaml variable

📝 Boilerplate Theme YAML

my-awesome-theme:
  uix-theme: my-awesome-theme
  uix-card-yaml: |
    "hui-card-features $": |
      hui-card-feature {
        /* your styles for hui-card-feature */
      }

Theme styling in existing theme

UIX Test:
  uix-theme: UIX Test

  uix-card-yaml: |
    "hui-card-features $": |
      hui-card-feature {
        --feature-height: 20px;
      }

Styled tile card feature height