Overview link

// src/components/template-components/header/main-navigation/overview-link/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/header/main-navigation/overview-link
additionalProperties: false
required:
  - label
  - url
properties:
  label:
    type: string
  url:
    type: string
    format: uri-reference
  copy:
    type: string
  tracking_class:
    type: string

// src/components/template-components/header/main-navigation/overview-link/mocks.yaml

$variants:
  - $name: Climate protection
    label: Klimaschutz
    url: url
    copy: >-
      Unsere Schwerpunkte zum Schutz der natürlichen Lebensgrundlage von Mensch
      und Natur.
  - $name: Biodiversity
    label: Biodiversität
    url: url
    copy: >-
      Unsere Schwerpunkte zum Schutz der natürlichen Lebensgrundlage von Mensch
      und Natur.
  - $name: Peace
    label: Frieden
    url: url
    copy: >-
      Unsere Schwerpunkte zum Schutz der natürlichen Lebensgrundlage von Mensch
      und Natur.
  - $name: Donations
    label: Spenden
    url: url
    copy: >-
      Unsere Schwerpunkte zum Schutz der natürlichen Lebensgrundlage von Mensch
      und Natur.
  - $name: Participate
    label: Mitmachen
    url: url
    copy: Hier steht eine Mission zum Unterthema
  - $name: About us
    label: Über uns
    url: url
    copy: Hier steht eine Mission zum Unterthema

// src/components/template-components/header/main-navigation/overview-link/overview-link.html.twig

<a href="{{ url }}" class="OverviewLink{% if not copy %} OverviewLink--withoutCopy{% endif %}{% if class %} {{ class }}{% endif %}{% if tracking_class %} {{ tracking_class }}{% endif %}">
  <span class="OverviewLink-title u-typo-headline5">{{ label }}</span>
  {% if copy %}
    <span class="OverviewLink-copy u-typo-copy-desktop-copy-small-mobile">{{ copy }}
      {% include "@elements/icon/icon.html.twig" with {
        name: "arrow",
        class: "OverviewLink-icon"
      } only %}
      </span>
  {% endif %}
</a>