slide-intro

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/story-slider/slide-intro
type: object
required:
  - color_scheme
  - media
  - next_slide_button_label
  - title
additionalProperties: false
properties:
  color_scheme:
    type: string
    enum:
      - white
      - jakobskraut
      - terrakotta
      - schwarzesche
      - latsche
      - schlern
      - estrich
      - leinen
      - sandstein
  next_slide_button_label:
    type: string
  overline:
    type: string
  title:
    type: string
  media_type:
    type: string
    enum:
      - image
      - video
  media:
    format: html
    type: string
    description: /elements/video or /elements/image

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

$hidden: true
overline: Stellenangebot
title: Werde Monteur für eine führende Premium-Marke
media:
  $ref: elements/image#story_slider_intro_slide
  $tpl: elements/image
  classes:
    - StorySliderSlideIntro-introImage
next_slide_button_label: Vorteile entdecken
$variants:
  - $name: Intro with image
    color_scheme: jakobskraut
    media_type: image
  - $name: Intro with picture image
    color_scheme: jakobskraut
    media_type: image
  - $name: Terrakotta intro with image
    color_scheme: terrakotta
    media_type: image
  - $name: Intro no overline
    color_scheme: jakobskraut
    media_type: image
    overline: ''
    $opts:
      overline: overwrite
  - $name: Intro with video
    color_scheme: jakobskraut
    media_type: video
    media:
      $ref: elements/video#video-slide-decorative
      $tpl: elements/video
      classes:
        - StorySliderSlideIntro-introVideo
    $opts:
      media: overwrite

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

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

<section aria-labelledby="{{ label }}" aria-roledescription="slide" aria-brailleroledescription="sld" class="StorySliderSlideIntro StorySlider-content" data-theme="{{ color_scheme }}" role="group">
	<div class="StorySliderSlideIntro-introMedia">
		{% if media_type == "image" %}
			{{ media|mira({picture_classes: ["StorySliderSlideIntro-introImage"]}) }}
		{% elseif media_type == "video" %}
			{% include '@elements/video-custom-controls/video-custom-controls.twig' with {
				video: media,
				type: "decorative",
				classes: ["StorySliderSlideIntro-introVideo"]
			} only %}
		{% endif %}

		<div class="StorySliderSlideIntro-mediaOverlay">
			<h2 class="StorySliderSlideIntro-title" id="{{ label }}">
				{%- if overline -%}
					<span class="StorySlider-slideOverline">{{ overline }}</span>
					<span class="visually-hidden"> : </span>
				{% endif %}

				{{ title }}
			</h2>
		</div>
	</div>
	<div class="StorySliderSlideIntro-footer">
		<button class="StorySliderSlideIntro-nextSlide" type="button">
			{{ next_slide_button_label }}
			{% include "@elements/icon/icon.twig" with {
				name: "arrow_forward",
			} only %}
		</button>
	</div>
</section>