footer

Information

Folder
src/components/patterns/footer

Files

Schema
// src/components/patterns/footer/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/footer
type: object
required:
  - logo_url
  - nav
  - contact
  - opening_hours
  - service
additionalProperties: false
properties:
  logo_url:
    type: string
    format: uri-reference
  nav:
    $ref: /patterns/footer/nav
  contact:
    type: string
    format: html
  opening_hours:
    type: string
    format: html
  service:
    $ref: /patterns/footer/service
Mocks
// src/components/patterns/footer/mocks.yaml

logo_url: /
nav:
  $ref: /patterns/footer/nav
contact: |
  <p>
    Hofweg 21<br>
    22085 Hamburg
  </p>
  <p>
    <a href="+4916097550216">+49 160 975 502 16</a><br>
    <a href="mailto:goldschmiede@karolinescharf.de">goldschmiede@karolinescharf.de</a>
  </p>
opening_hours: |
  <p>
    Öffnungszeiten:<br>
    Di–Fr 11:00–13:00 Uhr, 14:00–18:00 Uhr<br>
    Samstag nach Vereinbarung
  </p>
service:
  $ref: /patterns/footer/service
Template
// src/components/patterns/footer/footer.twig

<footer class="Footer">
	<div class="Footer-container u-container">
		<div class="Footer-nav">
			{% include "@elements/logo/logo.twig" with {
				class: "Footer-logo",
				url: logo_url,
				label: "Startseite",
				width: 200,
				height: 248,
			} only %}

			{% include "@patterns/footer/nav/nav.twig" with nav only %}
		</div>

		<div class="Footer-info">
			<address>{{ contact|raw }}</address>
			<div>{{ opening_hours|raw }}</div>
		</div>

		{% include "@patterns/footer/service/service.twig" with service only %}
	</div>
</footer>

Variants

default
Open