teaser

// src/components/patterns/teaser-list/teaser/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/teaser-list/teaser
additionalProperties: false
type: object
required:
  - heading
  - url
properties:
  heading:
    type: string
  heading_level:
    type: number
  url:
    type: string
    format: uri-reference
  image:
    type: string
    format: html
    description: elements/image
  content:
    type: string

// src/components/patterns/teaser-list/teaser/mocks.yaml

$hidden: true
url: url
heading: This is a teaser heading
image:
  $tpl: elements/image
  width: 3360
  height: 1960
content: Reprehenderit in proident excepteur incididunt in duis fugiat.
$variants:
  - $name: Image 1
    image:
      uri: src/img/dummy/teaser-01.webp
      alt: Grünkohl
  - $name: Image 2
    image:
      uri: src/img/dummy/teaser-02.webp
      alt: Salat
  - $name: Image 3
    image:
      uri: src/img/dummy/teaser-03.webp
      alt: Rotkohl

// src/components/patterns/teaser-list/teaser/teaser.twig

{%- set heading_level = heading_level|default(3) -%}
<article class="Teaser">
	<div class="Teaser-content">
		<h{{ heading_level }} class="h4">
			<a href="{{ url }}">
				{{ heading }}
			</a>
		</h{{ heading_level }}>
		{% if content %}
			<p class="Teaser-copy">{{ content|raw }}</p>
		{% endif %}
	</div>
	{% if image %}
		<div class="Teaser-image">
			{{ image|raw }}
		</div>
	{% endif %}
</article>