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
  $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

<div class="StorySliderSlideImage">
	{{ image|mira({
		alt: "",
		classes: ["StorySliderSlideImage-image"]
	}) }}

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

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