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
Mocks
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>