A way to create a custom card and refer to it later?

[gurukid]

Hey guys, I’ve created the following card.

entity: switch.office_lights
    style:
      top: 20%
      left: 30%
    icon: 'mdi:ceiling-light'
    name: Office lights
    show_state: true
    state:
      - styles:
          card:
            - color: white
            - background: 'linear-gradient(-45deg, blue, rgb(139,97,255))'
          icon:
            - color: white
        value: 'on'
      - styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
        value: 'off'
    styles:
      card:
        - width: 120px
        - height: 120px
        - border-radius: 10px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      icon:
        - color: blue
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    type: 'custom:button-card'

It works great, but I want to place this same thing on other views in other locations. I can obviously copy this and paste it elsewhere, but is there a way for me to save this as a card or “thing” and then refer to it later by just calling it?

Thanks!

[tom_l]

@gurukid

is there a way for me to save this as a card or “thing” and then refer to it later by just calling it?

Yes, if you are using lovelace yaml mode you can use anchors.

[Infineghost]

What @tom_l said is indeed an option.

Recently i get familiar with the decluttering card which can also do the trick. Basically you can define a template and keep reusing it by defining the template.

Lovelace: Decluttering Card

Hey, I’ve created a new card that helps you declutter your LL config if you use multiple times the same block of cards with small differences (like an entity for example) to display things in LL. Visit github for installation instructions, up to date documentation and troubleshooting guide [GitHub Release] [GitHub Activity] [custom_updater] [Project Maintenance] decluttering-card This card is for Lovelace on Home Assistant. We all use multiple times the same block of configuration acros…

[gurukid]

This is a good solution, but I hate losing the front-end editor. It works though, and I almost prefer it if I could preserve front end GUI editing.

[gurukid]

WOW. I cannot believe I missed this module! I’ve got this installed now and I feel like I’m light years ahead of where I was 2 days ago. This is definitely the solution for me. Thanks!

[Infineghost]

I’m with you there bro .

Glad i could be of help