thomasloven / lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
MIT License
1.05k stars 125 forks source link

Title on the layout card #239

Open thisisbenwoo opened 1 year ago

thisisbenwoo commented 1 year ago

Hi All,

I've searched and searched, but I can't seem to find out to create a title for a layout card. I'm using the layout card as a card and not a view, and I'm combining it with a bunch of independent buttons. The reason I'm not using the grid card is to take advantage of the layout capabilities of the layout card. I would rather not have an extra card (mushroom-title-card in this case), as opposed to just having a title for the layout card.

Here's a look at what I'm doing: image

The yaml looks like this:

square: true
columns: 1
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: Keys
        subtitle_tap_action:
          action: none
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr 4fr 4fr 4fr 4fr 1fr
        cards:
          - type: custom:gap-card
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.house_keys
            icon: mdi:key-chain
            show_state: false
            name: House Keys
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.bike_keys
            icon: mdi:bike
            name: Bike Keys
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.wallet
            icon: fas:wallet
            name: Wallet
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.oneplus_8t
            icon: mdi:cellphone-dock
            name: OnePlus 8T
          - type: custom:gap-card
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: none

Thanks in advance.