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
  - slide_link
  - title
additionalProperties: false
properties:
  color_scheme:
    type: string
    enum:
      - white
      - jakobskraut
      - terrakotta
      - schwarzesche
      - latsche
      - schlern
      - estrich
      - leinen
      - sandstein
  overline:
    type: string
  title:
    type: string
  slide_link:
    type: object
    additionalProperties: false
    required:
      - label
      - url
    properties:
      label:
        type: string
      url:
        format: uri-reference
        type: string
  media_type:
    type: string
    enum:
      - image
      - video
  image:
    additionalProperties: false
    type: object
    required:
      - image
    properties:
      image:
        format: html
        type: string
        description: /elements/image
  video:
    additionalProperties: false
    type: object
    required:
      - video
    properties:
      video:
        format: html
        type: string
        description: /elements/video-custom-controls

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

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

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

<div class="StorySliderSlideIntro StorySliderSlide--colorScheme{{ color_scheme|capitalize }}">
	<div class="StorySliderSlideIntro-introMedia">
		{% if media_type == "image" %}
			{{ image.image|mira({classes: ["StorySliderSlideIntro-introImage"]}) }}
		{% endif %}

		{% if media_type == "video" %}
			{{ video.video|mira({classes: ["StorySliderSlideIntro-introVideo"]}) }}
		{% endif %}

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

				{{ title }}
			</h2>
		</div>
	</div>
	<div class="StorySliderSlideIntro-footer">
		{% include "@elements/link/link.twig" with slide_link|merge({
			classes: ["StorySliderSlideIntro-link"],
			icon: true,
			icon_name: "arrow_forward"
		}) only %}
	</div>
</div>