Add custom HTML to your Panel

Summary: Use the info field in a blueprint to display HTML in the Panel.

Customize the info field

First, use the option theme: none in order to disable the info field's styling. Second, remove the label from the field with label: "". Now, add your html to the text option. You can add multiline HTML content by using the | character.

Blueprint example

info:
  label: ""
  type: info
  theme: none
  text: |
    <h2>How to install Kirby in 5 minutes</h2>
    <div style="aspect-ratio: 16/9;"><iframe style="object-fit: cover;" src="https://www.youtube.com/embed/EDVYjxWMecc?list=PLTep5U-3mg9EfgnQ08XDRs4vSOmhw2JWz" title="How to install Kirby in 5 minutes" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

More ideas

You could even use the Kirby Query Language in order to show dynamic HTML content. For example you could welcome every user with a personal message on the Panel dashboard.

Blueprint example

info:
  label: ""
  type: info
  theme: none
  text: |
    <h2>Nice to see you, {{ user.name }}</h2>

Please do not overdo it with custom HTML. You will need to maintain it and maybe customize it if the design of the Panel changes. Keep the look of the Panel consistent with the rest, and try to use Kirby’s default HTML and styling whenever possible. Be careful about the kind of HTML you include in the Panel to avoid potential security risks.