card

// src/components/elements/card/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/card
additionalProperties: false
type: object
required:
  - heading
  - url
  - location
properties:
  heading:
    type: string
  url:
    type: string
    format: uri-reference
  image:
    type: string
    format: html
    description: elements/image
  additional_info:
    type: array
    items:
      type: string
  location:
    type: string
  logo:
    type: string
    format: html
    description: elements/partner-logo

// src/components/elements/card/mocks.yaml

$variants:
  - $name: With image
    url: url
    heading: Leitung der Abteilung „Qualitätsmanagement“ (m/w)
    additional_info:
      - Personal
      - Vollzeit
    image:
      $tpl: elements/image
      $ref: elements/image#16x9
    location: Oppeano, Trentino, Italien
  - $name: With partner
    logo:
      $ref: elements/partner-logo
      $tpl: elements/partner-logo
    url: url
    heading: Mitarbeiter (m/w) für die techn. Auftrags-bearbeitung
    additional_info:
      - Vollzeit
    location: Oppeano, Trentino, Italien

// src/components/elements/card/card.twig

<article class="Card u-typo-TextM">
	{% if image %}
		<div class="Card-image">{{ image }}</div>
	{% endif %}
	<div class="Card-content">
		{% if additional_info %}
			<ul class="Card-additionalInfo">
				{% for item in additional_info %}
          {% if item %}
					  <li class="Card-additionalInfoItem">{{ item }}</li>
          {% endif %}
				{% endfor %}
			</ul>
		{% endif %}
		<h3 class="u-typo-HeadlineM Card-heading">
			<a href="{{ url }}" class="Card-headingLink">{{ heading }}</a>
		</h3>
		{% if logo %}
			<div class="Card-partnerImage">{{ logo }}</div>
		{% endif %}
		<span class="Card-location">
			{% include "@elements/icon/icon.twig" with {
				name: "pin",
				classes: ["Card-locationPin"],
			} only %}
			<span class="Card-locationName">{{ location }}</span>
			{% include "@elements/icon/icon.twig" with {
				name: "arrow_forward",
				classes: ["Card-locationArrow"],
			} only %}
		</span>
	</div>
</article>