<section class="Page-header">
<div class="constrain">
<div class="Page-header__content grid grid--v-gap-l grid--10/2">
<div class="flow--m">
<header class="flow">
<h1 class="Page-header__header h h-1">
<span>Line one.</span>
<span>Line two.</span>
<span>Line three.</span>
</h1>
</header>
</div>
</div>
</div>
</section>
{% set hasTitleLines = title.lines is defined and (title.lines|length) %}
{% set hasTitleText = title.text is defined and title.text %}
{% set hasMoustache = title.moustache is defined and title.moustache %}
{% set hasTitleClass = title.class is defined and title.class %}
{% set hasTitle = hasTitleLines or hasTitleText or hasMoustache %}
{% set hasStandfirst = content.standfirst is defined and content.standfirst %}
{% set hasSubtitle = content.subtitle is defined and content.subtitle %}
{% set hasContent = hasStandfirst or hasSubtitle %}
{% set hasCta = cta is defined and cta.text and (cta.link or cta.teamContact) %}
{% set hasBorder = border is defined and border %}
{% set hasBrush = brush is defined and brush %}
{% set hasMenu = menu is defined and menu %}
<section class="Page-header{{ hasBorder ? ' Page-header--border-b' : '' }}{{ hasBrush ? ' Page-header--brush' }}">
<div class="constrain">
<div class="Page-header__content grid grid--v-gap-l grid--10/2">
<div class="flow--m">
{% if hasTitle %}
<header class="flow">
<h1 class="Page-header__header h {{ hasTitleClass ? title.class : 'h-1' }}">
{% if hasTitleLines %}
{% for line in title.lines %}
<span>{{ line }}</span>
{% endfor %}
{% elseif hasTitleText %}
{{ title.text }}
{% endif %}
</h1>
{% if hasMoustache %}
{% if title.moustache is iterable %}
<p class="eyebrow eyebrow--meta text-grey-step-1">
{% for item in title.moustache %}
{% if item != null %}
<span>{{ item|raw }}</span>
{% endif %}
{% endfor %}
</p>
{% else %}
<p class="eyebrow text-grey-step-1">
{{ title.moustache|raw }}
</p>
{% endif %}
{% endif %}
</header>
{% endif %}
{% if hasContent %}
<div class="flow--m">
{% if hasSubtitle %}
<h2 class="Page-header__subtitle h h-4">
{{ content.subtitle }}
</h2>
{% endif %}
{% if hasStandfirst %}
<div class="body wysiwyg--with-lead flow {{ content.standfirst.colour|default( 'text-grey' ) }}">
{{ content.standfirst.text|raw }}
</div>
{% endif %}
</div>
{% endif %}
{% if hasCta %}
{% if cta.teamContact is defined and cta.teamContact %}
{% include '@team-contact' with cta.teamContact|merge({
title: cta.text
}) %}
{% else %}
{% if cta.style is defined and cta.style == 'combo-button' %}
{% include '@combo-button' with {
text: cta.text,
link: cta.link,
theme: cta.theme
} %}
{% else %}
{% include '@twi' with {
icon: 'arrow-right',
text: cta.text,
link: cta.link
} %}
{% endif %}
{% endif %}
{% endif %}
</div>
{% if hasMenu %}{{ menu|raw }}{% endif %}
</div>
</div>
</section>
{
"title": {
"text": "Page title",
"lines": [
"Line one.",
"Line two.",
"Line three."
]
}
}
.Page-header {
&__header {
display: flex;
flex-direction: column;
}
&__subtitle {
color: var(--grey);
}
&--border-b {
padding-bottom: 0;
}
&--border-b &__content {
padding-bottom: var(--space-m-l);
border-bottom: 1px solid var(--light-grey-step--1);
}
&--brush {
position: relative;
margin-bottom: 68px;
}
&--brush::after {
background: url( '../img/brush-end.svg' ),
linear-gradient( 180deg, var(--dark), var(--dark) 99%, var(--white) 99% );
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: '';
height: 68px;
pointer-events: none;
position: absolute;
top: 100%;
width: 100%;
}
}
@media screen and (min-width: 50rem) {
.Page-header {
&--brush {
margin-bottom: 126px;
}
&--brush::after {
background-position: bottom;
height: 88px;
top: calc( 100% + 38px );
}
}
}
No notes defined.