_overview-slide

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/benefits-slider/_benefits-slider--mobile/_overview-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/_overview-slide/mocks.yaml

title: Finstral bietet Monteuren hohe Standards
kicker: Florian Oberrauch<br>Geschäftsleitung Finstral
items:
  - Ausbildung
  - Ausstattung
  - Bezahlung
  - Arbeitsplanung
  - Qualitätsprodukte
image:
  $ref: elements/image#benefit-overview
  $tpl: elements/image
  classes:
    - BenefitsSlider-image

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

{# First slide #}
<div class="BenefitsSlider-slide">
	<h2 class="BenefitsSlider-title u-typo-HeadlineXL">{{ title }}</h2>
	<p class="BenefitsSlider-kicker u-typo-TextS">{{ kicker }}</p>
	{{ image|mira({
		classes: [
			"BenefitsSlider-image",
		]
	}) }}
</div>

{# Second slide #}
<div class="BenefitsSlider-slide">
	<ul class="BenefitsSlider-benefits u-typo-HeadlineS">
		{% for item in items %}
			<li class="BenefitsSlider-benefit">
				{% include "@elements/icon/icon.twig" with {
					name: "arrow_forward",
				} only %}
				{{ item }}
			</li>
		{% endfor %}
	</ul>
</div>