Merge pull request #1580 from UI-Lovelace-Minimalist/wilbie-cards-#1

Add custom cards title and subtitle

custom_cards/custom_card_mpse_printer/custom_card_mpse_printer.yaml

@@ -93,7 +93,7 @@ custom_card_mpse_printer:
             bar-card-backgroundbar{
               display: none;
             }
-              bar-card-name{
+            bar-card-name{
               width: 2rem;
               margin-right: 40px !important;
             }

custom_cards/custom_card_wilbiev_subtitle/README.md

@@ -0,0 +1,65 @@
+---
+title: Subtitle Custom-card
+hide:
+  - toc
+---
+
+<!-- markdownlint-disable MD046 -->
+
+# Custom-card "Subtitle"
+
+This is a `custom-card` to display a subtitle header.
+
+![Screenshot](../../docs/assets/img/custom_card_wilbiev_subtitle.png)
+
+## Credits
+
+Author: wilbiev - 2023
+Version: 1.0.0
+
+## Changelog
+
+<details>
+<summary>1.0.0</summary>
+Initial release.
+</details>
+
+## Requirements
+
+This card needs the following to function correctly:
+
+['Text Divider Row'](https://github.com/iantrich/text-divider-row)
+
+## Variables
+
+<table>
+<tr>
+<th>Variable</th>
+<th>Example</th>
+<th>Required</th>
+<th>Default</th>
+<th>Explanation</th>
+</tr>
+<tr>
+<td>ulm_custom_card_wilbiev_subtitle_name</td>
+<td>"Subtitle"</td>
+<td>yes</td>
+<td></td>
+<td>The name to display</td>
+</tr>
+</table>
+
+## Usage
+
+```yaml
+- type: "custom:button-card"
+  template: "custom_card_wilbiev_subtitle"
+  variables:
+    ulm_custom_card_wilbiev_title_name: "Lights"
+```
+
+??? note "Template Code"
+
+    ```yaml title="custom_card_bar_card.yaml"
+    --8<-- "custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_subtitle.yaml"
+    ```

custom_cards/custom_card_wilbiev_subtitle/custom_card_wilbiev_subtitle.yaml

@@ -0,0 +1,48 @@
+---
+### Card SubTitle ###
+custom_card_wilbiev_subtitle:
+  variables:
+    ulm_custom_card_wilbiev_title_name: "Subtitle"
+  tap_action:
+    action: "none"
+  show_icon: false
+  show_label: false
+  show_name: false
+  styles:
+    card:
+      - height: "auto"
+      - padding: "0px !important;"
+    grid:
+      - grid-template-areas: "'item1'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+  card_mod:
+    style: |
+      ha-card {
+        background-color: #E8E9EB !important;
+      }
+  custom_fields:
+    item1:
+      card:
+        type: "entities"
+        card_mod:
+          style: |
+            ha-card {
+              background-color: #E8E9EB !important;
+            }
+        entities:
+          - type: "custom:text-divider-row"
+            text: |
+              [[[ return variables.ulm_custom_card_wilbiev_subtitle_name ]]]
+            card_mod:
+              style: |
+                :host {
+                  --text-divider-font-size: 24px;
+                  --text-divider-color: black
+                }
+                .text-divider span {
+                  background-color: #E8E9EB !important;
+                }
+          - type: "divider"
+            style:
+              background-color: "rgb(210,210,210)"

custom_cards/custom_card_wilbiev_title/README.md

@@ -0,0 +1,73 @@
+---
+title: Title Custom-card
+hide:
+  - toc
+---
+
+<!-- markdownlint-disable MD046 -->
+
+# Custom-card "Title"
+
+This is a `custom-card` to display a title header.
+
+![Screenshot](../../docs/assets/img/custom_card_wilbiev_title.png)
+
+## Credits
+
+Author: wilbiev - 2023
+Version: 1.0.0
+
+## Changelog
+
+<details>
+<summary>1.0.0</summary>
+Initial release.
+</details>
+
+## Requirements
+
+This card needs the following to function correctly:
+
+['Text Divider Row'](https://github.com/iantrich/text-divider-row)
+
+## Variables
+
+<table>
+<tr>
+<th>Variable</th>
+<th>Example</th>
+<th>Required</th>
+<th>Default</th>
+<th>Explanation</th>
+</tr>
+<tr>
+<td>ulm_custom_card_wilbiev_title_name</td>
+<td>"Title"</td>
+<td>yes</td>
+<td></td>
+<td>The name to display</td>
+</tr>
+<tr>
+<td>ulm_custom_card_wilbiev_title_nav</td>
+<td>"/adaptive-dash/home"</td>
+<td>no</td>
+<td>"<none>"</td>
+<td>"Navigate to another view. Shows the 'Back'-button when having a value"</td>
+</tr>
+</table>
+
+## Usage
+
+```yaml
+- 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
+```
+
+??? note "Template Code"
+
+    ```yaml title="custom_card_bar_card.yaml"
+    --8<-- "custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_title.yaml"
+    ```

custom_cards/custom_card_wilbiev_title/custom_card_wilbiev_title.yaml

@@ -0,0 +1,87 @@
+---
+### 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;
+                }