partner

// src/components/patterns/partner/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/partner
type: object
required:
  - logo
  - address
  - links
  - route
  - cta
  - gallery
additional_properties: false
properties:
  logo:
    type: string
    format: html
    description: /elements/partner-logo
  address:
    type: string
    format: html
  links:
    type: array
    items:
      type: object
      required:
        - url
        - label
      additional_properties: false
      properties:
        url:
          type: string
          format: uri-reference
        label:
          type: string
  route:
    type: string
    format: html
    description: /elements/link
  badges:
    type: array
    items:
      type: string
      format: html
      description: /elements/image
  cta:
    type: string
    format: html
    description: /elements/button
  gallery:
    type: string
    format: html
    description: /elements/slider

// src/components/patterns/partner/mocks.yaml

logo:
  $tpl: /elements/partner-logo
  $ref: /elements/partner-logo
  width: 254
  height: 48
address: |
  Kroiher GmbH<br>
  Hochstraß 2<br>
  83064 Raubling<br>
  Deutschland
links:
  - url: tel:+4908035964770
    label: T:&nbsp;08035&nbsp;964770
  - url: mailto:post@kroiher-fenster.de
    label: post@kroiher-fenster.de
  - url: https://www.kroiher-fenster.de
    label: www.kroiher-fenster.de
route:
  $tpl: /elements/link
  $ref: /elements/link#with-icon
  label: Route planen
badges:
  - $tpl: /elements/image
    $ref: /elements/image#src-with-lazy
    uri: /build/assets/img/dummy/partner/badge-1.webp
  - $tpl: /elements/image
    $ref: /elements/image#src-with-lazy
    uri: /build/assets/img/dummy/partner/badge-2.webp
  - $tpl: /elements/image
    $ref: /elements/image#src-with-lazy
    uri: /build/assets/img/dummy/partner/badge-3.webp
cta:
  $tpl: /elements/button
  $ref: /elements/button#secondary-link
  label: Details zum Partner
  large: true
gallery:
  $tpl: /elements/slider
  label: Bildergalerie
  slides:
    - $tpl: /elements/image
      $ref: /elements/image#src-with-lazy
      uri: /build/assets/img/dummy/partner/studio.webp
      width: 902
      height: 601
$variants:
  - $name: multiple images
    gallery:
      slides:
        - $tpl: /elements/image
          $ref: /elements/image#src-with-lazy
          uri: https://placehold.co/902x601?text=Bild 2
          width: 902
          height: 601
        - $tpl: /elements/image
          $ref: /elements/image#src-with-lazy
          uri: https://placehold.co/902x601?text=Bild 3
          width: 902
          height: 601
        - $tpl: /elements/image
          $ref: /elements/image#src-with-lazy
          uri: https://placehold.co/902x601?text=Bild 4
          width: 902
          height: 601

// src/components/patterns/partner/partner.twig

<article class="Partner u-container u-breakout u-grid">
	<div class="Partner-content">
		<div class="Partner-logo">
			{{ logo }}
		</div>

		<address class="Partner-address u-typo-TextM">
			{{ address }}
		</address>

		<div class="Partner-directions">
			{{ route }}
		</div>

		<ul class="Partner-links u-typo-TextM">
			{% for link in links %}
				<li class="Partner-linksItem">
					<a class="Partner-linksLink" href="{{ link.url }}">
						{{ link.label }}
					</a>
				</li>
			{% endfor %}
		</ul>

		{% if badges %}
			<ul class="Partner-badges">
				{% for badge in badges %}
					<li class="Partner-badge">
						{{ badge }}
					</li>
				{% endfor %}
			</ul>
		{% endif %}

		<div class="Partner-cta">
			{{ cta }}
		</div>
	</div>

	<div class="Partner-gallery">
		{{ gallery }}
	</div>
</article>