teaser-card-list

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

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

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

heading: Kategorien
items:
  - $tpl: elements/link-card
    $ref: elements/link-card#Extranet Category Card
    link:
      label: Aktuelles
  - $tpl: elements/link-card
    $ref: elements/link-card#Extranet Category Card
    link:
      label: Marketing
  - $tpl: elements/link-card
    $ref: elements/link-card#Extranet Category Card
    link:
      label: Partner Studio
  - $tpl: elements/link-card
    $ref: elements/link-card#Extranet Category Card
    link:
      label: Beratung und Service
  - $tpl: elements/link-card
    $ref: elements/link-card#Extranet Category Card
    link:
      label: Montage
  - $tpl: elements/link-card
    $ref: elements/link-card#Extranet Category Card
    link:
      label: Bestellwesen

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

{{ attach_library('finstral_global/pattern-teaser-card-list') }}

<div class="TeaserCardList">
	<h2 class="TeaserCardList-heading">{{ heading }}</h2>
	<ul class="TeaserCardList-list">
		{% for item in items %}
			<li class="TeaserCardList-item">{{ item }}</li>
		{% endfor %}
	</ul>
</div>