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"
  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_color;
            return "rgba(" + color + ",0.7)"
          ]]]
    label:
      - align-self: "center"
      - font-size: "14px"
      - filter: "opacity(100%)"
    grid:
      - grid-template-columns: "min-content min-content"