src/components/patterns/newsletter-teaser// src/components/patterns/newsletter-teaser/schema.yaml
$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/newsletter-teaser
additionalProperties: false
required:
- headline
properties:
headline:
type: string
description:
type: string
button:
$ref: /elements/button
// src/components/patterns/newsletter-teaser/mocks.yaml
$hidden: true
$variants:
- $name: default
headline: 'Alles, was bewegt: der Greenpeace Newsletter'
description: >-
Immer auf dem Laufenden bleiben mit unserem Newsletter. Wir informieren
über Kampagnen, Mitmachmöglichkeiten und spannende Events und freuen uns,
wenn Sie dabei sind!
button:
$ref: /elements/button#default-link
label: Jetzt abonnieren
// src/components/patterns/newsletter-teaser/newsletter-teaser.html.twig
<article class="NewsletterTeaser u-container">
<div class="NewsletterTeaser-inner">
<div class="NewsletterTeaser-iconWrapper">
{% include "@elements/icon/icon.html.twig" with {name: "mail-animated"} only %}
</div>
{% if headline %}
<h3 class="NewsletterTeaser-headline u-typo-headline3">{{ headline|german_quotes }}</h3>
{% endif %}
{% if description %}
<p class="NewsletterTeaser-copy u-typo-copy">{{ description|german_quotes }}</p>
{% endif %}
{% if button %}
{% include "@elements/button/button.html.twig" with button|merge({class: "NewsletterTeaser-button"}) only %}
{% endif %}
</div>
</article>
default mock data
headline: 'Alles, was bewegt: der Greenpeace Newsletter'
description: >-
Immer auf dem Laufenden bleiben mit unserem Newsletter. Wir informieren über
Kampagnen, Mitmachmöglichkeiten und spannende Events und freuen uns, wenn Sie
dabei sind!
button:
$ref: /elements/button#default-link
label: Jetzt abonnieren