---
#   _____
#  |  __ \
#  | |  | | ___  ___  ___
#  | |  | |/ _ \/ __|/ __|
#  | |__| |  __/\__ \ (__
#  |_____/ \___||___/\___|

cards:
  # Entity to control
  - entity: light.example
    # Icon to display
    icon: "mdi:television"
    # Button actions
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: medium
    styles:
      card:
        # Feel free to change the size here
        - width: min(20vw, 80px)
        - height: min(20vw, 80px)
      icon:
        - color: var(--primary-text-color)
    state:
      - value: "on"
        styles:
          card:
            - border-style: solid
            - border-width: 2px
            - border-color: var(--paper-item-icon-active-color)
            - box-shadow: var(--soft-ui-pressed)
          icon:
            - color: var(--paper-item-icon-active-color)
    show_icon: true
    show_name: false
    card_mod:
      class: soft-ui
    type: "custom:button-card"

  - content: |
      # Display in big text
      ## Display in the small text
    style:
      .: |
        ha-card {
            margin-top: 15px;
            --ha-card-background: none !important;
            box-shadow: none !important;
        }
      ha-markdown:
        $: |
          h1 {
              font-size: 20px !important;
          }
          h2 {
              font-size: 15px !important;
          }
    type: markdown
type: horizontal-stack