Skip to content

Navigate Card

Description

example-image

The card_navigate is for navigating inside your HA dashboard(s).

Variables

Variable Default Required Notes
ulm_card_navigate_path The path to your lovelace dashboard
ulm_card_navigate_title Title to show for the link
ulm_card_navigate_icon Icon to show
ulm_card_navigate_color Blue No Color of Icon

Usage

- type: custom:button-card
  template: card_navigate
  variables:
    ulm_card_navigate_path: /ui-lovelace-minimalist/media
    ulm_card_navigate_title: Media
    ulm_card_navigate_icon: mdi:television
    ulm_card_navigate_color: var(--color-red)
Template Code
card_navigate.yaml
---
### Card Navigate ###
card_navigate:
  template:
    - "icon_only"
    - "blue_no_state"
  tap_action:
    action: "navigate"
    navigation_path: "[[[ return variables.ulm_card_navigate_path; ]]]"
  variables:
    ulm_card_navigate_color: "var(--color-blue)"
  label: "[[[ return variables.ulm_card_navigate_title; ]]]"
  icon: "[[[ return variables.ulm_card_navigate_icon; ]]]"
  styles:
    icon:
      - color: >
          [[[
            let color = variables.ulm_card_navigate_colour;
            return "rgba(" + color + ",0.7)"
          ]]]
    label:
      - align-self: "center"
      - font-size: "14px"
      - filter: "opacity(100%)"
    grid:
      - grid-template-columns: "min-content min-content"