_overview-slide

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

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

<div class="BenefitsSlider-slide">
	<div class="u-container BenefitsSlider-content">
		<div class="BenefitsSlider-row u-grid">
			<h2 class="BenefitsSlider-title u-typo-HeadlineXL">{{ title }}</h2>
		</div>
		<div class="BenefitsSlider-row u-grid">
			<p class="BenefitsSlider-kicker u-typo-TextS">{{ kicker }}</p>
			{{ image|mira({
				classes: [
					"BenefitsSlider-image",
				]
			}) }}
			<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>
	</div>
</div>