slide-mixed

// src/components/patterns/story-slider/slide-mixed/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/story-slider/slide-mixed
type: object
required:
  - color_scheme
  - title
  - list
  - image_position
  - image
additionalProperties: false
properties:
  color_scheme:
    type: string
    enum:
      - white
      - jakobskraut
      - terrakotta
      - schwarzesche
      - latsche
      - schlern
      - estrich
      - leinen
      - sandstein
  overline:
    type: string
  title:
    type: string
  list:
    type: array
    items:
      type: string
  image_position:
    type: string
    enum:
      - bottom
      - top
  image:
    format: html
    type: string
    description: elements/image

// src/components/patterns/story-slider/slide-mixed/mocks.yaml

color_scheme: terrakotta
overline: Bei Finstral Standard
title: Kostenlose Ausbildung nach EQF und ift.
list:
  - erst fachgerechter Einbau macht ein Fenster perfekt
  - >-
    Schulung moderner Montagenach Vorgaben des European Qualification Framework
    (EQF) und Institut für Fenstertechnik (ift)
image_position: bottom
image:
  $ref: elements/image#mixed-story-slide
  $tpl: elements/image
  classes:
    - StorySliderSlideMixed-image
$variants:
  - $name: Image top
    image_position: top

// src/components/patterns/story-slider/slide-mixed/slide-mixed.twig

<div class="StorySliderSlideMixed StorySliderSlide--colorScheme{{ color_scheme|capitalize }} StorySliderSlideMixed-{{ image_position }}">
	<div class="StorySliderSlideMixed-content">
		<h2 class="StorySliderSlideMixed-title">
			{%- if overline -%}
				<span class="StorySliderSlideMixed-overline">{{ overline }}</span>
				<span class="visually-hidden"> : </span>
			{% endif %}

			{{ title }}
		</h2>

		<ul class="StorySliderSlideMixed-list">
			{%- for item in list -%}
				<li class="StorySliderSlideMixed-item">
					<div class="StorySliderSlideMixed-icon">
						{% include "@elements/icon/icon.twig" with {
							name: "bulletpoint",
						} only %}
					</div>
					{{ item }}
				</li>
			{%- endfor -%}
		</ul>
	</div>

	{{ image|mira({image: "StorySliderSlideMixed-image"}) }}
</div>