Teasers

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

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/teasers
additionalProperties: false
required:
  - columns
  - items
properties:
  headline:
    type: string
  columns:
    type: number
    enum:
      - 1
      - 2
      - 3
  items:
    type: array
    items:
      $ref: /elements/teaser
  tenant:
    type: string

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

headline: Teaser Module Headline (z.B. News)
$hidden: true
$variants:
  - $name: One column teasers
    columns: 1
    items:
      - $ref: /elements/teaser
        headline: Ohne Erde kein Film
        copy: >-
          Kann Film die Welt verändern? Die Kurzfilme des 17Films-Wettbewerbs
          jedenfalls zeigen recht unterschiedlich, wie jeder und jede Einzelne
          die Welt ein Stück besser machen kann.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 36
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          In den Tiefen der Ozeane verbirgt sich ein einzigartiger Lebensraum,
          den wir gerade erst zu verstehen beginnen. Doch westliche Firmen
          drängen auf Ausbeutung dortiger Rohstoffe.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 37
  - $name: Two columns teasers
    columns: 2
    items:
      - $ref: /elements/teaser
        headline: Ohne Erde kein Film
        copy: >-
          Kann Film die Welt verändern? Die Kurzfilme des 17Films-Wettbewerbs
          jedenfalls zeigen recht unterschiedlich, wie jeder und jede Einzelne
          die Welt ein Stück besser machen kann.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 38
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          In den Tiefen der Ozeane verbirgt sich ein einzigartiger Lebensraum,
          den wir gerade erst zu verstehen beginnen. Doch westliche Firmen
          drängen auf Ausbeutung dortiger Rohstoffe.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 39
      - $ref: /elements/teaser
        headline: Ohne Erde kein Film
        copy: >-
          Kann Film die Welt verändern? Die Kurzfilme des 17Films-Wettbewerbs
          jedenfalls zeigen recht unterschiedlich, wie jeder und jede Einzelne
          die Welt ein Stück besser machen kann.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 40
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          In den Tiefen der Ozeane verbirgt sich ein einzigartiger Lebensraum,
          den wir gerade erst zu verstehen beginnen. Doch westliche Firmen
          drängen auf Ausbeutung dortiger Rohstoffe.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 41
      - $ref: /elements/teaser
        headline: Ohne Erde kein Film
        copy: >-
          Kann Film die Welt verändern? Die Kurzfilme des 17Films-Wettbewerbs
          jedenfalls zeigen recht unterschiedlich, wie jeder und jede Einzelne
          die Welt ein Stück besser machen kann.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 42
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          In den Tiefen der Ozeane verbirgt sich ein einzigartiger Lebensraum,
          den wir gerade erst zu verstehen beginnen. Doch westliche Firmen
          drängen auf Ausbeutung dortiger Rohstoffe.
        label: Mehr zum Thema lesen
        image:
          $ref: elements/image#teaser-medium
          $tpl: elements/image
          id: 43
  - $name: Three columns teasers
    columns: 3
    items:
      - $ref: /elements/teaser
      - $ref: /elements/teaser
        teaser_tenant: kids
        headline: (K)Ein großer Wurf
        copy: >-
          Das Bundeskabinett hat ein Insektenschutz-Paket beschlossen. Doch kann
          es das Insektensterben aufhalten?
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          Die Hälfte der EU-Subventionen für die Landwirtschaft könnten für
          Klima- und Umweltschutz eingesetzt werden. Dafür müssen
          Agrarministerinnen und -minister jetzt die Weichen stellen.
      - $ref: /elements/teaser
      - $ref: /elements/teaser
        headline: (K)Ein großer Wurf
        copy: >-
          Das Bundeskabinett hat ein Insektenschutz-Paket beschlossen. Doch kann
          es das Insektensterben aufhalten?
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          Die Hälfte der EU-Subventionen für die Landwirtschaft könnten für
          Klima- und Umweltschutz eingesetzt werden. Dafür müssen
          Agrarministerinnen und -minister jetzt die Weichen stellen.
        teaser_variant: engagement
        format: null
        date: null
        label: Petition unterzeichnen
      - $ref: /elements/teaser
        teaser_variant: petition
        format: null
        date: null
        label: Petition unterzeichnen
        id: '29970'
      - $ref: /elements/teaser
        teaser_variant: petition
        format: null
        date: null
        label: Petition unterzeichnen
        id: '29970'
      - $ref: /elements/teaser
        teaser_variant: petition
        format: null
        date: null
        label: Petition unterzeichnen
        id: '29970'
  - $name: Kids
    columns: 3
    tenant: kids
    items:
      - $ref: /elements/teaser
        format: null
        date: null
      - $ref: /elements/teaser
        headline: (K)Ein großer Wurf
        copy: >-
          Das Bundeskabinett hat ein Insektenschutz-Paket beschlossen. Doch kann
          es das Insektensterben aufhalten?
        format: null
        date: null
      - $ref: /elements/teaser
        headline: 10 Tipps mit denen wir unser Klima retten
        copy: >-
          Die Hälfte der EU-Subventionen für die Landwirtschaft könnten für
          Klima- und Umweltschutz eingesetzt werden. Dafür müssen
          Agrarministerinnen und -minister jetzt die Weichen stellen.
        format: null
        date: null

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

<div class="Teasers u-container{% if class %} {{ class }}{% endif %} Teasers--{{ columns }}columns">
  {% if headline %}
    <h2 class="Teasers-headline{% if tenant %} Teasers-headline--{{ tenant }}{% endif %}">
      {% if tenant and tenant == "kids" %}
        {% include "@elements/icon/icon.html.twig" with {
          name: "decoration-teasers-left",
          class: "Teasers-decoration Teasers-decoration--left",
        } only %}
      {% endif %}
      {{ headline }}
      {% if tenant and tenant == "kids" %}
        {% include "@elements/icon/icon.html.twig" with {
          name: "decoration-teasers-right",
          class: "Teasers-decoration Teasers-decoration--right",
        } only %}
      {% endif %}
    </h2>
  {% endif %}
  <div class="Teasers-itemsHolder u-grid">
    {% for item in items %}
      {% set teaser_type %}
        {%- if item.teaser_type -%}
          {{ item.teaser_type }}
        {%- else -%}
          {%- if columns == 1 -%}
            landscape
          {%- elseif columns == 2 -%}
            middle
          {%- else -%}
            small
          {%- endif -%}
        {%- endif -%}
      {%- endset -%}
      {% set item = item|merge({
        class: "Teasers-item",
        teaser_type: teaser_type,
        tenant: tenant
      }) %}
      {% include "@elements/teaser/teaser.html.twig" with item only %}
    {% endfor %}
  </div>
</div>