• Mindestgrößen Mobil: 450px × 169px (Retina: 900px × 338px)
• Mindestgrößen Desktop: 1200px × 450px (Retina: 2400px × 900px)
• Stage-Bilder dürfen nicht lazy, sondern sollten so früh wie möglich geladen werden. Dafür eignet sich das preload link Element.

<link rel="preload" href="/images/home-stage-l.jpg" as="image" media="(max-width: 769px)">
<link rel="preload" href="/images/home-stage-m.jpg" as="image" media="(min-width: 481px) and (max-width: 768px)">
<link rel="preload" href="/images/home-stage-s.jpg" as="image" media="(max-width: 480px)">

# Parameter stage(heading, attributes, modifiers, img, video_settings, link, color)
heading: "string" # Frei wählbar
heading_level: "string" # HTML-Element für die Überschrift, kann auch div sein (default: h1)
attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar
modifiers: "array" # zulässige Werte: desktop-only, home, media, color, right
img: "object/array" # siehe /pattern-library/patterns/bilder
video_settings: "object" # siehe /pattern-library/patterns/video-player/
link: "object" #
  url: "string" # Pfad des Links
  text: "string" # Text frei wählbar
prefix: "string" # Text, der vor den Titel ausgegeben wird (optional)
no_modal: "Boolean" # Jedes Bild wird automatisch in einer Lightbox dargestellt. „true“, um das zu verhindern.

# Anwendung
{% from "components/stage/stage.njk" import stage with context %}

{% call stage(heading = "Überschrift") %}
 Inhalt frei wählbar
{% endcall %}