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:
  - >-
    Schulung moderner Montagenach Vorgaben des European Qualification Framework
    (EQF) und Institut für Fenstertechnik (ift)
  - >-
    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

{% set label = "slide-mixed-" ~ random() %}

<section aria-labelledby="{{ label }}" aria-roledescription="slide" aria-brailleroledescription="sld" class="StorySliderSlideMixed StorySliderSlideMixed-{{ image_position }} StorySlider-content" data-theme="{{ color_scheme }}" role="group">
	<div class="StorySliderSlideMixed-content">
		<h2 class="StorySliderSlideMixed-title" id="{{ label }}">
			{%- if overline -%}
				<span class="StorySlider-slideOverline">{{ 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({picture_classes: ["StorySliderSlideMixed-image"]}) }}
</section>