header

If you need to add a new logo variant: kindly ensure to use the same dimensions as the current logo, with a width of 310px and a height of 23px. This will avert any discrepancies with scaling or shifting of logos when toggling between pages bearing different logos. Position the file's content within this specified artboard (310*23px). In case there's a requirement to modify the artboard size, please adjust all pre-existing logos to match the newly proposed dimensions.

Information

Folder
src/components/template-components/header

Files

Schema 
// src/components/template-components/header/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header
additionalProperties: false
type: object
required:
  - logo
  - nav
properties:
  logo:
    type: object
    required:
      - label
    properties:
      label:
        type: string
      url:
        type: string
        format: uri-reference
      uri:
        type: string
        format: uri-reference
        description: Path to logo image. If not set, the default logo will be set.
  nav:
    type: string
    format: html
    description: template-components/header/menu
Mocks 
// src/components/template-components/header/mocks.yaml

logo:
  url: /
  label: Go to homepage
nav:
  $render:
    - $tpl: template-components/header/menu
      $ref: template-components/header/menu
    - $tpl: template-components/header/language
      $ref: template-components/header/language
    - $tpl: template-components/header/search
      $ref: template-components/header/search
$variants:
  - $name: Cloud
    logo:
      uri: /img/logo_cloud.svg
  - $name: Composer
    logo:
      uri: /img/logo_composer.svg
  - $name: Contacts
    logo:
      uri: /img/logo_contacts.svg
Template 
// src/components/template-components/header/header.twig

{% if logo.uri is not empty %}
  {% set logo_uri = asset_path() ~ logo.uri %}
{% else %}
  {% set logo_uri = asset_path() ~ "/img/logo.svg" %}
{% endif %}

{% set logo_img_html %}
	{% include "@elements/image/image.twig" with {
		uri: logo_uri,
		width: 310,
		height: 23,
		alt: "Finstral logo"|t
	} only %}
{% endset %}

<header class="Header js-Header">
	<div class="u-container">
		<div class="Header-wrapper">
			<div class="Header-inner">
				{% if logo %}
					<div class="Header-logo">
						{% if logo.url %}
							<a class="Header-logoLink" href="{{ logo.url }}" aria-label="{{ logo.label }}">
								{{ logo_img_html }}
							</a>
						{% else %}
							{{ logo_img_html }}
						{% endif %}
					</div>
				{% endif %}
				{% if nav %}
					<div class="Header-nav">
						{{ nav|raw }}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</header>

Variants

default
Open
Cloud
Open
Composer
Open
Contacts
Open