_benefit-slide

// src/components/patterns/benefits-slider/_benefits-slider--mobile/_benefit-slide/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/benefits-slider/_benefits-slider--mobile/_benefit-slide
additionalProperties: false
type: object
required:
  - image
  - items
  - kicker
  - title
properties:
  title:
    type: string
  kicker:
    type: string
  items:
    type: array
    items:
      type: string
  image:
    type: string
    description: /elements/image

// src/components/patterns/benefits-slider/_benefits-slider--mobile/_benefit-slide/mocks.yaml

$hidden: true
$variants:
  - $name: benefit 1
    kicker: Bei Finstral Standard
    title: Kostenlose Ausbildung nach EQF und ift.
    items:
      - erst fachgerechter Einbau macht ein Fenster perfekt
      - >-
        Schulung moderner Montagenach Vorgaben des European Qualification
        Framework (EQF) und Institut für Fenstertechnik (ift)
    image:
      $ref: elements/image#benefit-1
      $tpl: elements/image
      classes:
        - BenefitsSlider-image
  - $name: benefit 2
    kicker: Bei Finstral Standard
    title: Topp Arbeitsmittel, hohe Arbeitssicherheit
    items:
      - wir sorgen für eine rundum professionelle Arbeitsumgebung
      - >-
        zum Beispiel durch moderne Hebehilfen und Fahrzeuge, Tablet-PC für
        papierlose Baustellen-Organisation etc.
    image:
      $ref: elements/image#benefit-2
      $tpl: elements/image
      classes:
        - BenefitsSlider-image
  - $name: benefit 3
    kicker: Bei Finstral Standard
    title: Fairer Lohn, pünktlich und regelmäßig
    items:
      - leistungsgerechte Entlohnung inklusive Zuschlägen
      - >-
        verlässliche Zahlung dank professioneller Buchhaltung eines großen
        Betriebs
    image:
      $ref: elements/image#benefit-3
      $tpl: elements/image
      classes:
        - BenefitsSlider-image
  - $name: benefit 4
    kicker: Bei Finstral Standard
    title: Konstante Auslastung, statt zu viel oder zu wenig
    items:
      - >-
        professionelle Einsatzplanung ohne großen Leerlauf oder ständiger
        Überlastung
      - konzentriere Dich auf Deine Arbeit, statt auf die Suche neuer Projekte
    image:
      $ref: elements/image#benefit-4
      $tpl: elements/image
      classes:
        - BenefitsSlider-image
  - $name: benefit 5
    kicker: Bei Finstral Standard
    title: Qualitätsprodukte, bei denen alles zusammenpasst
    items:
      - arbeite mit einem durchdachten, erprobten Produkt-sortiment
      - gut vorgeplante Aufträge, ab Werk vorgerichtete Elemente
      - weniger Fehlerquellen, weil alle Handgriffe auf der Baustelle geklärt
    image:
      $ref: elements/image#benefit-5
      $tpl: elements/image
      classes:
        - BenefitsSlider-image

// src/components/patterns/benefits-slider/_benefits-slider--mobile/_benefit-slide/_benefit-slide.twig

{# Slide with image #}
<div class="BenefitsSlider-slide">
	{{ image|mira({
		classes: [
			"BenefitsSlider-image",
		]
	}) }}
</div>

{# Slide with details #}
<div class="BenefitsSlider-slide">
	<p class="BenefitsSlider-kicker">{{ kicker }}</p>
	<h3 class="BenefitsSlider-title u-typo-HeadlineM">{{ title }}</h3>
	<ul class="BenefitsSlider-benefits">
		{% for item in items %}
			<li class="BenefitsSlider-benefit">{{ item }}</li>
		{% endfor %}
	</ul>
</div>