Infobox

// src/components/patterns/infobox/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/infobox
additionalProperties: false
required:
  - items
properties:
  headline:
    type: string
  items:
    type: array
    items:
      type: object
      properties:
        headline:
          type: string
        rte:
          $ref: /elements/rte
        media:
          $ref: /elements/media-template

// src/components/patterns/infobox/mocks.yaml

headline: Infobox Module Headline
$hidden: true
$variants:
  - $name: Three columns
    headline: Infobox Module Headline
    items:
      - headline: Gut zu wissen
        media:
          $ref: /elements/media-template
          is_portrait: false
          image:
            $tpl: elements/image
            width: 978
            height: 652
            src: https://via.placeholder.com/978x652
            alt: Alternative text
            id: 13
            sources:
              - width: 978
                height: 652
                srcset: https://via.placeholder.com/978x652
                media: '(max-width: 35.5625rem)'
              - width: 1758
                height: 1172
                srcset: https://via.placeholder.com/1758x1172
                media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
              - width: 688
                height: 459
                srcset: https://via.placeholder.com/668x459
                media: '(min-width: 60rem) and (max-width: 79.9375rem)'
              - width: 688
                height: 459
                srcset: https://via.placeholder.com/688x459
                media: '(min-width: 80rem)'
        rte:
          $ref: /elements/rte
          markup: >-
            <strong>390.000 LKW</strong> bringen jährlich 59 Mio. Schweine zu
            deutschen Schlachthöfen.
      - headline: Welche Vorteile hat es, biologisch erzeugte Produkte zu kaufen?
        rte:
          $ref: /elements/rte
          markup: >-
            Bei der Produktion von Lebensmitteln, die das EU-Biosiegel tragen,
            kommen keine chemisch-synthetischen Pestizide zur Anwendung. Mit dem
            Kauf von Bio-Lebensmitteln tragen Sie zu einer artgerechteren
            Tierhaltung, zu mehr Gewässer- und Klimaschutz, dem sparsameren
            Gebrauch von Antibiotika sowie zu dem Erhalt fruchtbarer Böden bei.
      - headline: Forderungen
        rte:
          $ref: /elements/rte
          markup: >-
            <ul><li>Umstellung auf ökologisch und sozial verträgliche
            Landwirtschaft</li><li>Subventionen nur an natur-, klima-,
            artenschonende Landwirtschaft</li><li>Weniger “Nutztiere”, dafür in
            artgerechter Haltung</li><li>Anbauverbot für Gen-Pflanzen,
            Einsatzverbot für Pestizide</li><li>Verbot von Patenten auf
            Pflanzen, Tiere und Lebensmittel</li></ul>
  - $name: Two columns
    items:
      - headline: Gut zu wissen
        media:
          $ref: /elements/media-template
          is_portrait: false
          image:
            $tpl: elements/image
            width: 978
            height: 652
            src: https://via.placeholder.com/978x652
            alt: Alternative text
            id: 13
            sources:
              - width: 978
                height: 652
                srcset: https://via.placeholder.com/978x652
                media: '(max-width: 35.5625rem)'
              - width: 1758
                height: 1172
                srcset: https://via.placeholder.com/1758x1172
                media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
              - width: 1080
                height: 720
                srcset: https://via.placeholder.com/1080x720
                media: '(min-width: 60rem) and (max-width: 79.9375rem)'
              - width: 1080
                height: 720
                srcset: https://via.placeholder.com/1080x720
                media: '(min-width: 80rem)'
        rte:
          $ref: /elements/rte
          markup: >-
            <strong>390.000 LKW</strong> bringen jährlich 59 Mio. Schweine zu
            deutschen Schlachthöfen.
      - headline: Welche Vorteile hat es, biologisch erzeugte Produkte zu kaufen?
        rte:
          $ref: /elements/rte
          markup: >-
            Bei der Produktion von Lebensmitteln, die das EU-Biosiegel tragen,
            kommen keine chemisch-synthetischen Pestizide zur Anwendung. Mit dem
            Kauf von Bio-Lebensmitteln tragen Sie zu einer artgerechteren
            Tierhaltung, zu mehr Gewässer- und Klimaschutz, dem sparsameren
            Gebrauch von Antibiotika sowie zu dem Erhalt fruchtbarer Böden bei.
  - $name: One column
    items:
      - headline: Welche Vorteile hat es, biologisch erzeugte Produkte zu kaufen?
        rte:
          $ref: /elements/rte
          markup: >-
            Bei der Produktion von Lebensmitteln, die das EU-Biosiegel tragen,
            kommen keine chemisch-synthetischen Pestizide zur Anwendung. Mit dem
            Kauf von Bio-Lebensmitteln tragen Sie zu einer artgerechteren
            Tierhaltung, zu mehr Gewässer- und Klimaschutz, dem sparsameren
            Gebrauch von Antibiotika sowie zu dem Erhalt fruchtbarer Böden bei.

// src/components/patterns/infobox/infobox.html.twig

<article class="Infobox u-container{% if class %} {{ class }}{% endif %}">
  <div class="Infobox-content">
    {% include "@elements/icon/icon.html.twig" with {
      name: "material",
      class: "Infobox-icon"
    } only %}
    {% if headline %}
      <h3 class="Infobox-headline u-typo-headline4">{{ headline }}</h3>
    {% endif %}
    <div class="Infobox-columns Infobox-columns--{{ items.length }}">
      {% for item in items %}
        <div class="Infobox-column">
          {% if item.headline %}
            <h4 class="Infobox-columnHeadline u-typo-headline5">{{ item.headline }}</h4>
          {% endif %}
          {% if item.media %}
            {% include "@elements/media-template/media-template.html.twig" with item.media|merge({class: "Infobox-columnMedia"}) only %}
          {% endif %}
          {% if item.rte %}
            {% include "@elements/rte/rte.html.twig" with item.rte|merge({class: "Infobox-columnRte"}) only %}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
</article>