teaser-list

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/teaser-list
additionalProperties: false
type: object
required:
  - list
properties:
  heading:
    type: string
    format: html
    description: patterns/heading
  list:
    type: array
    items:
      type: string
      format: html
      description: patterns/teaser-list/teaser

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

list:
  - $tpl: patterns/teaser-list/teaser
    $ref: patterns/teaser-list/teaser#image-1
  - $tpl: patterns/teaser-list/teaser
    $ref: patterns/teaser-list/teaser#image-2
  - $tpl: patterns/teaser-list/teaser
    $ref: patterns/teaser-list/teaser#image-3
$variants:
  - $name: With heading
    heading:
      $tpl: patterns/heading
      $ref: patterns/heading#h2
      heading: Teaser List

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

<div class="TeaserList">
	<div class="u-container">
		{% if heading %}
			<div class="TeaserList-heading">
				{{ heading }}
			</div>
		{% endif %}
		<ol class="TeaserList-list">
			{% for item in list %}
				<li>{{ item }}</li>
			{% endfor %}
		</ol>
	</div>
</div>