Flyout

// src/components/elements/flyout/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/flyout
properties:
  class:
    type: string
  has_flyout_open:
    type: boolean

// src/components/elements/flyout/mocks.yaml

has_flyout_open: true

// src/components/elements/flyout/flyout.html.twig

<div class="Flyout js-Flyout{% if class %} {{ class }}{% endif %}{% if has_flyout_open %} is-open{% endif %}">
  <div class="Flyout-holder">
    <span class="Flyout-headline u-typo-headline6">Vielen Dank für Ihre Unterstützung!</span>
    <button class="Flyout-closeButton js-Flyout-closeButton u-typo-copy-bold u-brandLink" type="button">
      Schließen
      {% include "@elements/icon/icon.html.twig" with {
        name: "cross",
        class: "Flyout-closeIcon",
      } only %}
    </button>
  </div>
  <p class="Flyout-copy u-typo-copy-small"><u>Monatliche</u> Spenden helfen Greenpeace am meisten. Erfolgreich die Umwelt zu schützen, benötigt einen langen Atem.</p>
</div>