4 SPACE saving tips for you Home Assistant Dashboard

Trying to get all your smart home devices into home dashboard might be very difficult, but with home assistant and these 4 space saving tips you will be able to optimise space.

Swipe Button

Example with grid cards

type: custom:swipe-card
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
    autoheight: true
cards:
  - type: light
    entity: light.imac_lamp
    name: Imac Lamp
    line_width: 4
    line_color: '#FF6384'
  - type: grid
    cards:
      - type: sensor
        entity: sensor.bedroom_temperature
        name: Bedroom
      - type: sensor
        entity: sensor.bedroom_temperature
        name: Bedroom
      - type: sensor
        entity: sensor.bedroom_temperature
        name: Bedroom
      - type: sensor
        entity: sensor.bedroom_temperature
        name: Bedroom
    columns: 2
    square: false
  - type: grid
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: light.porch_light
      - type: button
        tap_action:
          action: toggle
        entity: light.porch_light
      - type: button
        tap_action:
          action: toggle
        entity: light.porch_light
    columns: 2
    square: false
  - type: custom:mini-graph-card
    name: Temperature
    icon: mdi:thermometer
    entities:
      - entity: sensor.home_outdoor_temperature
        name: Outdoor
      - entity: sensor.landing_sensor_temperature
        name: Landing
      - entity: sensor.bedroom_temperature
        name: Bedroom

Example with Cameras:

type: custom:swipe-card
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
    autoheight: true
cards:
  - type: picture-entity
    entity: camera.front_door
    camera_view: live
    camera_image: camera.front_door
  - type: picture-entity
    entity: camera.parking_bay
    camera_view: live
    camera_image: camera.parking_bay

Image Switch

type: custom:button-card
aspect_ratio: 1/1
extra_styles: |
  @keyframes bgswap1 {
    0% {
      background-image: url("/local/netflix.png");
    }
    25% {
      background-image: url("/local/netflix.png");
    }
    50% {
      background-image: url("/local/plex.png");
    }
    75% {
      background-image: url("/local/plex.png");
    }
    100% {
      background-image: url("/local/netflix.png");
    }
  }
styles:
  card:
    - animation: bgswap1 10s linear infinite
    - background-size: cover
  name:
    - color: white

State Switch

type: custom:state-switch
entity: input_select.zone
states:
  Ground:
    type: vertical-stack
    cards:
      - type: entities
        title: Lights
        entities:
          - light.kitchen_lights
  First:
    type: grid
    cards:
      - type: grid
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: light.porch_light
          - type: button
            tap_action:
              action: toggle
            entity: light.porch_light
          - type: button
            tap_action:
              action: toggle
            entity: light.porch_light
        columns: 1
        square: false
      - type: button
        tap_action:
          action: toggle
        entity: light.porch_light

Conditional Card

type: conditional
conditions:
  - entity: light.imac_lamp
    state: 'on'
card:
  type: light
  entity: light.imac_lamp