| {% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %} | |
| {% if page.header.overlay_filter contains "gradient" %} | |
| {% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %} | |
| {% elsif page.header.overlay_filter contains "rgba" %} | |
| {% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %} | |
| {% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %} | |
| {% elsif page.header.overlay_filter %} | |
| {% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %} | |
| {% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %} | |
| {% endif %} | |
| {% if page.header.image_description %} | |
| {% assign image_description = page.header.image_description %} | |
| {% else %} | |
| {% assign image_description = page.title %} | |
| {% endif %} | |
| {% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %} | |
| <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}" | |
| style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}{{ overlay_filter }}, {% endif %}url('{{ overlay_img_path }}');{% endif %}" | |
| > | |
| {% if page.header.overlay_color or page.header.overlay_image %} | |
| <div class="wrapper"> | |
| <h1 id="page-title" class="page__title" itemprop="headline"> | |
| {% if paginator and site.paginate_show_page_num %} | |
| {{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %} | |
| {% else %} | |
| {{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }} | |
| {% endif %} | |
| </h1> | |
| {% if page.tagline %} | |
| <p class="page__lead">{{ page.tagline | markdownify | remove: "<p>" | remove: "</p>" }}</p> | |
| {% elsif page.header.show_overlay_excerpt != false and page.excerpt %} | |
| <p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p> | |
| {% endif %} | |
| {% include page__meta.html %} | |
| {% if page.header.cta_url %} | |
| <p><a href="{{ page.header.cta_url | relative_url }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p> | |
| {% endif %} | |
| {% if page.header.actions %} | |
| <p> | |
| {% for action in page.header.actions %} | |
| <a href="{{ action.url | relative_url }}" class="btn btn--light-outline btn--large"> | |
| {% if action.icon %} | |
| <i class="{{ action.icon }}"></i> | |
| {% endif %} | |
| {{ action.label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }} | |
| </a> | |
| {% endfor %} | |
| {% endif %} | |
| </div> | |
| {% else %} | |
| <img src="{{ page.header.image | relative_url }}" alt="{{ image_description }}" class="page__hero-image"> | |
| {% endif %} | |
| {% if page.header.caption %} | |
| <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span> | |
| {% endif %} | |
| </div> | |