<section class="Page-header Page-header--border-b">
<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>
<p class="eyebrow eyebrow--meta text-grey-step-1">
<span>Job title</span>
<span>Permanent</span>
</p>
</header>
<div class="flow--m">
<h2 class="Page-header__subtitle h h-4">
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</h2>
<div class="body wysiwyg--with-lead flow text-grey">
</div>
</div>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Some link text</span></a>
</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."
],
"moustache": [
"Job title",
"Permanent"
]
},
"content": {
"subtitle": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.",
"standfirst": "<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>"
},
"cta": {
"text": "Some link text",
"link": "#"
},
"border": true
}
.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.