Custom-card "Title"

This is a custom-card to display a title header.

Credits

Author: wilbiev - 2023 Version: 1.0.0

Changelog

1.0.0

Initial release.

Requirements

This card needs the following to function correctly:

'Text Divider Row'

Variables

Variable	Example	Required	Default	Explanation
ulm_custom_card_wilbiev_title_name	"Title"	yes		The name to display
ulm_custom_card_wilbiev_title_nav	"/adaptive-dash/home"	no	""	"Navigate to another view. Shows the 'Back'-button when having a value"

Usage

- type: "custom:button-card"
  template: "custom_card_wilbiev_title"
  variables:
    ulm_custom_card_wilbiev_title_name: "Living room"
    ulm_custom_card_wilbiev_title_nav: "/adaptive-dash/home" # OPTIONAL

Template Code

custom_card_wilbiev_title.yaml

---
### Card Title ###
custom_card_wilbiev_title:
  variables:
    ulm_custom_card_wilbiev_title_name: "Title"
    ulm_custom_card_wilbiev_title_nav: ""
  tap_action:
    action: "navigate"
    navigation_path: "[[[ return variables.ulm_custom_card_wilbiev_title_nav; ]]]"
  show_icon: false
  show_label: false
  show_name: false
  styles:
    grid:
      - grid-template-areas: >
          [[[
            return "'" + [(variables.ulm_custom_card_wilbiev_title_nav ? 'item2' : 'item1'),
                        (variables.ulm_custom_card_wilbiev_title_nav ? 'item1' : '')].join(' ') + "'";
          ]]]
      - grid-template-columns: |
          [[[
            return [(variables.ulm_custom_card_wilbiev_title_nav ? 'min-content 1fr' : '1fr')].join(' ');
          ]]]
      - grid-template-rows: "min-content"
    card:
      - height: "auto"
      - padding: "5px !important;"
    custom_fields:
      item2:
        - display: >
            [[[
              if(variables.ulm_custom_card_wilbiev_title_nav == ""){
                return "none";
              } else {
                return "block";
              }
            ]]]
  card_mod:
    style: |
      ha-card {
        border: 2px black outset !important;
        background-color: lightgray !important;
      }
  custom_fields:
    item1:
      card:
        type: "entities"
        card_mod:
          style: |
            ha-card {
              --primary-text-color: black;
              background-color: lightgray !important;
              box-shadow: none;
            }
        entities:
          - type: "custom:text-divider-row"
            text: |
              [[[ return variables.ulm_custom_card_wilbiev_title_name ]]]
            card_mod:
              style: |
                :host {
                  --text-divider-color: black;
                  --text-divider-font-size: 36px;
                  --text-divider-line-size: 3px;
                  --text-divider-margin: 0px;
                }
                .text-divider span {
                  background-color: lightgray !important;
                }
    item2:
      card:
        type: "custom:mushroom-chips-card"
        chips:
          - type: "action"
            tap_action:
              action: "navigate"
              navigation_path: "[[[ return variables.ulm_custom_card_wilbiev_title_nav; ]]]"
            icon: "mdi:arrow-left"
            card_mod:
              style: |
                ha-card {
                  --primary-text-color: black;
                  --chip-background: #E8E9EB;
                  --chip-height: 48px;
                  --chip-border-radius: 50%;
                  --chip-icon-size: 24px;
                }