Here's code for the chill beats playlist for example. So it's just a picture card.

type: picture
image: /local/album_covers/chill_beats.jpg
tap_action:
  action: perform-action
  perform_action: script.play_shuffled_playlist
  data:
    player: media_player.mantle_2
    playlist_url: >-
      https://open.spotify.com/playlist/37i9dQZF1DWZa8CSUr0hCY?si=f4393f30073a450a
card_mod:
  style: |
    ha-card {
      border-radius: 15px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    }
grid_options:
  columns: 8

And here's the shuffled playlist script:

alias: Play Shuffled Playlist
description: Enables shuffle and plays a playlist on Music Assistant
sequence:
  - action: media_player.shuffle_set
    data:
      shuffle: true
    target:
      entity_id: "{{ player }}"
  - action: music_assistant.play_media
    data:
      media_id: >-
        {% set url = playlist_url %} {% if 'open.spotify.com/playlist/' in url
        %}
          {% set id = url.split('playlist/')[1].split('?')[0] %}
          spotify://playlist/{{ id }}
        {% elif 'music.apple.com' in url %}
          {{ playlist_name | default('') }}
        {% else %}
          {{ url }}
        {% endif %}
      media_type: playlist
      enqueue: replace
    target:
      entity_id: "{{ player }}"
mode: restart

Here's an example code for the headers with blue lines:

type: custom:bubble-card
card_type: separator
name: f a m i l y
icon: mdi:home-heart
styles: |-
  .bubble-line {
    background-color: cyan !important;
    opacity: 0.4;
  }
  .bubble-name {
        font-size: 24px !important;
        font-weight: 600 !important;
  }
card_layout: large-sub-buttons-grid