slide-image

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

$schema: http://json-schema.org/draft-07/schema
$id: patterns/story-slider/slide-image
type: object
required:
  - image
additionalProperties: false
properties:
  overline:
    type: string
  title:
    type: string
  image:
    format: html
    type: string
    description: elements/image

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

image:
  $ref: elements/image#9x16_picture
  $tpl: elements/image
  alt: ''
  classes:
    - StorySliderSlideImage-image
$variants:
  - $name: With title
    title: Werde Monteur für eine führende Premium-Marke
  - $name: With title and overline
    title: Werde Monteur für eine führende Premium-Marke
    overline: Vorteile

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

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

<section {% if title %} aria-labelledby="{{ label }}" {% endif %} aria-roledescription="slide" aria-brailleroledescription="sld" class="StorySliderSlideImage StorySlider-content" role="group">
	<div class="StorySliderSlideImage-image">
		{{ image|mira({
			alt: "",
		}) }}
	</div>

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

				{{ title }}
			</h2>
		</div>
	{%- endif -%}
</section>