details

// src/components/patterns/contact/details/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/contact/details
type: object
required:
  - heading
  - description
  - items
additionalProperties: false
properties:
  heading:
    type: string
  description:
    type: string
  items:
    type: array
    items:
      type: object
      required:
        - url
        - icon
        - title
        - text
      additionalProperties: false
      properties:
        url:
          type: string
          format: uri-reference
        icon:
          type: string
        title:
          type: string
        text:
          type: string

// src/components/patterns/contact/details/mocks.yaml

heading: Questions about products or orders?
description: >-
  Windows, front doors and glass walls are investments that last for decades. We
  would be happy to advise you personally – virtually too, of course. We are
  always there for you.
items:
  - url: tel:+390471296611
    icon: phone
    title: Please call us
    text: +39 0471 296611
  - url: mailto:partnersupport@finstral.com
    icon: email
    title: Send us an email
    text: partnersupport@finstral.com

// src/components/patterns/contact/details/details.twig

<div class="ContactDetails">
	<h2 class="u-typo-HeadlineL">{{ heading }}</h2>
	<p class="ContactDetails-description">{{ description }}</p>

	<ul class="ContactDetails-list">
		{% for item in items %}
			<li class="ContactDetails-item">
				<!-- [html-validate-disable tel-non-breaking] -->
				<a class="ContactDetails-link u-link" href="{{ item.url }}">
					{% include "@elements/icon/icon.twig" with {
						name: item.icon,
						size: "large",
						classes: ["ContactDetails-linkIcon"],
					} only %}
					<span class="ContactDetails-linkContent">
						<strong class="ContactDetails-linkTitle u-typo-Button">
							{{ item.title }}<span class="u-hiddenVisually">:</span>
						</strong>
						<span class="ContactDetails-linkText">{{ item.text }}</span>
					</span>
				</a>
				<!-- [html-validate-enable tel-non-breaking] -->
			</li>
		{% endfor %}
	</ul>
</div>