Petition Teaser

// src/components/patterns/petition-teaser/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/petition-teaser
additionalProperties: false
required:
  - url
  - headline
  - copy
  - button
properties:
  id:
    type: string
  url:
    type: string
    format: uri-reference
  headline:
    type: string
  copy:
    type: string
  button:
    $ref: /elements/button

// src/components/patterns/petition-teaser/mocks.yaml

url: act.greenpeace.de/werbestopp-fleisch
headline: Jetzt unterschreiben
copy: >-
  Sehr geehrte Frau Klöckner,  der Verkauf von klima- und
  gesundheitsgefährdenden Produkten sollte nicht durch Werbung künstlich
  angeheizt werden. Fleisch ist Lebensmittel mit schwerwiegenden Folgen für
  Klima, Umwelt und Gesundheit.
button:
  label: Mehr erfahren & Mitmachen
  url: act.greenpeace.de/werbestopp-fleisch
id: '29970'
$variants:
  - $name: Two lines background
    headline: Jetzt unterschreiben für ein Fleischwerbeverbot!
  - $name: Three lines background
    headline: >-
      Jetzt unterschreiben für ein Fleischwerbeverbot! Jetzt unterschreiben für
      ein Fleischwerbeverbot!
  - $name: Without id
    id: null

// src/components/patterns/petition-teaser/petition-teaser.html.twig

<article class="PetitionTeaser js-PetitionTeaser u-container {% if not id %}PetitionTeaser--general{% endif %}" {% if id %}data-id="{{ id }}"{% endif %}>
  <div class="PetitionTeaser-inner u-grid">
    <div class="PetitionTeaser-text">
      <p class="u-typo-label-small">Online-Mitmachaktion</p>
      <a class="PetitionTeaser-link u-typo-link u-brandLink" href="{{ url }}">{{ url }}</a>
      <h3 class="PetitionTeaser-headline u-typo-headline3">{{ headline }}</h3>
      <p class="PetitionTeaser-copy u-typo-copy">{{ copy }}</p>
      {% include "@elements/button/button.html.twig" with button|merge({class: "PetitionTeaser-button", icon: "edit"}) only %}
    </div>
    {% if id %}
      {% include "@elements/progress-bar/progress-bar.html.twig" with {class: "js-PetitionTeaser-progressBar PetitionTeaser-progressBar"} only %}
    {% endif %}
  </div>
</article>