Tabs Graph

// src/components/patterns/tabs/tabs-content/tabs-graph/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tabs/tabs-content/tabs-graph
additionalProperties: false

// src/components/patterns/tabs/tabs-content/tabs-graph/mocks.yaml

$variants: null

// src/components/patterns/tabs/tabs-content/tabs-graph/tabs-graph.html.twig

{% set graph_image = {
  url: asset_path().toString() ~ "images/tabs-graph.svg",
  alt: "Spenden halbkreis",
  width: 327,
  height: 217
} %}

{% set round_seal = {
  url: asset_path().toString() ~ "images/logo-dfv.webp",
  alt: "Deutscher Fundraising Verband",
  width: 105,
  height: 104
} %}

{% set seal = {
  url: asset_path().toString() ~ "images/logo-itz.svg",
  alt: "Initiative Transparente Zivilgesellschaft",
  width: 369,
  height: 104
} %}

<div class="TabsGraph">
  <div class="TabsGraph-row">
    <div class="TabsGraph-info">
      <h2 class="u-typo-headline5">So wird Ihre Spende eingesetzt</h2>
      <p class="u-typo-copy">Jeder Beitrag zählt! Über 67% der Spenden fließen direkt in Kampagnen, die den Schutz unserer Umwelt vorantreiben. Weitere Mittel werden in Kommunikation, Werbung und Verwaltung investiert, um die Wirkung unserer Arbeit zu maximieren.</p>
      <a href="/ueber-uns/greenpeace-jahresbericht" class="TabsGraph-link u-brandLink u-typo-copy-bold">Mehr erfahren in unserem Jahresbericht</a>
    </div>

    <div class="TabsGraph-imageWrapper">
      <img src="{{ graph_image.url }}" alt="{{ graph_image.alt }}" width="{{ graph_image.width }}" height="{{ graph_image.height }}">
    </div>
  </div>

  <div class="TabsGraph-row">
    <div class="TabsGraph-seals">
      <img class="TabsGraph-seal" src="{{ seal.url }}" alt="{{ seal.alt }}" width="{{ seal.width }}" height="{{ seal.height }}">
      <img class="TabsGraph-roundSeal" src="{{ round_seal.url }}" alt="{{ round_seal.alt }}" width="{{ round_seal.width }}" height="{{ round_seal.height }}">
    </div>

    <div class="TabsGraph-info">
      <h2 class="u-typo-headline5">Vertrauen durch Transparenz</h2>
      <p class="u-typo-copy">Greenpeace ist stolz darauf, Siegel wie das der "Initiative Transparente Zivilgesellschaft" zu tragen. Wir setzen auf volle Offenlegung unserer Finanzen, um Ihr Vertrauen zu stärken und unsere Arbeit so nachvollziehbar wie möglich zu gestalten.</p>
    </div>
  </div>
</div>