contact-block

// src/components/elements/contact-block/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/contact-block
additionalProperties: false
type: object
properties:
  kicker:
    type: string
  name:
    type: string
  position:
    type: string
  contact_image:
    type: string
    format: html
    description: elements/image
  partner:
    type: boolean
  logo:
    type: string
    format: html
    description: elements/partner-logo
  address:
    type: string
  details:
    type: array
    items:
      type: string
      format: html
      description: elements/contact-block/_contact-block-link

// src/components/elements/contact-block/mocks.yaml

$variants:
  - $name: default
    kicker: Ihre Ansprechpartnerin
    name: Maren Glasner
    position: Head of Human Ressources, Unterinn, Südtirol, Italien
    contact_image:
      $tpl: elements/image
      $ref: elements/image#3x4
  - $name: partner
    partner: true
    kicker: Partner Finstral
    logo:
      $ref: elements/partner-logo
      $tpl: elements/partner-logo
    address: Hochstraß 2<br>83064 Raubling<br>Deutschland
    details:
      - $tpl: elements/contact-block/_contact-block-link
        $ref: elements/contact-block/_contact-block-link#telephone
      - $tpl: elements/contact-block/_contact-block-link
        $ref: elements/contact-block/_contact-block-link#email
      - $tpl: elements/contact-block/_contact-block-link
        $ref: elements/contact-block/_contact-block-link#website

// src/components/elements/contact-block/contact-block.twig

<div class="ContactBlock u-typo-TextM">
	{% if partner %}
	<div class="ContactBlock-data">
		<span class="ContactBlock-type">{{ kicker }}</span>
		<div class="ContactBlock-partnerLogo">{{ logo }}</div>
		<address class="ContactBlock-address">{{ address }}</address>
		<ul class="ContactBlock-partnerDetails">
			{% for detail in details %}
				<li class="ContactBlock-partnerDetail">{{ detail }}</li>
			{% endfor %}
		</ul>
	</div>
	{% else %}
		<div class="ContactBlock-image">{{ contact_image|raw }}</div>
		<div class="ContactBlock-data">
			<span class="ContactBlock-kicker">{{ kicker }}</span>
			<p class="ContactBlock-name u-typo-HeadlineS">{{ name }}</p>
			<p class="ContactBlock-position">{{ position }}</p>
		</div>
	{% endif %}
</div>