5 Frontend HACS

######### Mini Graph ##########

type: 'custom:mini-graph-card'
    entities:
      - sensor.processor_use_percent
    line_color: blue
    line_width: 8
    name: Processor Usage
    font_size: 75
    
    
######### Mini Media Player with Buttons ##########

type: 'custom:mini-media-player'
artwork: cover
source: icon
hide:
  volume: false
shortcuts:
  columns: 4
  buttons:
    - icon: 'mdi:cat'
      type: script
      id: script.catSound
    - icon: 'mdi:youtube'
      type: script
      id: SubscribeToMarkWattTech
    - icon: 'mdi:silverware-fork-knife'
      type: source
      id: Kitchen
    - icon: 'mdi:bed'
      type: service
      id: notify.alexa_media
      data:
        message: Bed Time everyone
        target: media_player.downstairs_echo
        data:
          type: tts
entity: media_player.downstairs_echo


######### Mini Media Player ##########

type: entities
entities:
  - type: 'custom:mini-media-player'
    entity: media_player.downstairs_echo
    group: true
    source: icon
    info: short
    hide:
      volume: true
      power: true
  - type: 'custom:mini-media-player'
    entity: media_player.kitchen_echo
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.auroras_echo
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.lilahs_echo
    group: true
    hide:
      controls: true
  - type: 'custom:mini-media-player'
    entity: media_player.patio_speakers
    group: true
    hide:
      controls: true
      

######### SWIPE Navigation ##########

swipe_nav:
  wrap: false
  animate: flip
  prevent_default: true
  swipe_amount: 30
  

######### SWIPE CARD ##########

type: 'custom:swipe-card'
card_width: 200px
start_card: 2
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
  pagination: null
  type: bullets
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.processor_use_percent
    line_color: blue
    line_width: 8
    name: Processor Usage
    font_size: 75
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.processor_temperature
    line_color: green
    line_width: 8
    name: Processor Temp
    font_size: 75
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.disk_use_percent_home
    line_color: red
    line_width: 8
    name: Disk Usage
    font_size: 75

######### BANNER CARD BASIC ##########
type: 'custom:banner-card'
heading:
  - 'mdi:server'
  - HA Monitor
background: '#B0C2ED'
link: /lovelace/banner-card
entities:
  - entity: sensor.processor_use_percent
    name: Processor Usage
  - entity: sensor.processor_temperature
    name: Processor Temp
  - entity: sensor.disk_use_percent_home
    name: Disk Usage

######### BANNER CARD EMOJI ##########

type: 'custom:banner-card'
heading:
  - "\U0001F642 Emoji \U0001F642"
background: '#B0C2ED'
link: /lovelace/banner-card
entities:
  - entity: sensor.processor_use_percent
    name: Processor Usage
  - entity: sensor.processor_temperature
    name: Processor Temp
  - entity: sensor.disk_use_percent_home
    name: Disk Usage


######### BANNER CARD ENTITIES ##########

type: 'custom:banner-card'
heading:
  - 'mdi:cpu'
  - Extra Example
background: '#B0C2ED'
link: /lovelace/banner-card
entities:
  - entity: sensor.processor_use_percent
    name: Processor Usage
  - entity: sensor.processor_temperature
    name: Processor Temp
  - entity: sensor.disk_use_percent_home
    name: Disk Usage
  - entity: switch.fairy_lights
    name: Light Toggle
    domain: switch
  - entity: switch.fairy_lights
    name: Light on?
    domain: binary_sensor
  - entity: media_player.downstairs_echo
    name: Downstairs Music
  - entity: null

Hi Mate, awesome tutorial and thanks for sharing. Any chance you can post the code for the 1st mini-media-player example, the one with the buttons

@wdwithmp Done :D

I wan learn script.catsound, script.subscribe..., notify.bed.. please public

For the live of me I cant get the alternate Y-Axis to work. The example doesnt really make sense and in the UI-Editor everything fails with Mapping errors.
Did you have a look at this any further?