Image teasers

// src/components/patterns/image-teasers/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/image-teasers
additionalProperties: false
required:
  - items
properties:
  headline:
    type: string
  items:
    type: array
    items:
      $ref: /elements/image-teaser

// src/components/patterns/image-teasers/mocks.yaml

headline: '@greenpeace.de'
items:
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image
  - $ref: elements/image-teaser
    label: this is a link to the instagram post
    url: url
    image:
      $ref: elements/image#image-teaser
      $tpl: elements/image

// src/components/patterns/image-teasers/image-teasers.html.twig

<div class="ImageTeasers u-container{% if class %} {{ class }}{% endif %}">
  {% if headline %}
    <h2 class="ImageTeasers-headline u-typo-headline3">{{ headline }}</h2>
  {% endif %}
  <div class="ImageTeasers-items u-grid">
    {% for item in items %}
      {% set item = item|merge({
        class: "ImageTeasers-item",
      }) %}
      {% include "@elements/image-teaser/image-teaser.html.twig" with item only %}
    {% endfor %}
  </div>
</div>