<section class="Training-header">
<div class="constrain">
<div class="Training-header__content grid grid--v-gap-l grid--8/4">
<div class="flow--m">
<header class="flow">
<h1 class="Training-header__header h h-1">
Page title
</h1>
<p class="eyebrow eyebrow--meta text-grey-step-1">
<span>Job title</span>
<span>Permanent</span>
</p>
</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 hasMetadata = content.metadata is defined and content.metadata %}
{% set hasPricing = pricing is defined %}
<section class="Training-header">
<div class="constrain">
<div class="Training-header__content grid grid--v-gap-l grid--8/4">
<div class="flow--m">
{% if hasTitle %}
<header class="flow">
<h1 class="Training-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 hasStandfirst %}
<div class="body wysiwyg--with-lead flow {{ content.standfirst.colour|default( 'text-grey' ) }}">
{{ content.standfirst.text|raw }}
</div>
{% endif %}
{# Meta goes here #}
{% if hasMetadata %}
<dl class="Training-header__metadata dl">
{% for item in content.metadata %}
<div>
<dt class="dt">{{ item.label }}</dt>
<dd class="dd">{{ item.value }}</dd>
</div>
{% endfor %}
</dl>
{% endif %}
</div>
{# Card goes here #}
{% if hasPricing %}
{{ include(
'@training-pricing-card',
{
eyebrow: pricing.eyebrow is defined and pricing.eyebrow != null ? pricing.eyebrow,
price: pricing.price is defined and pricing.price != null ? pricing.price,
moustache: pricing.moustache is defined and pricing.moustache != null ? pricing.moustache,
text: pricing.text is defined and pricing.text != null ? pricing.text,
cta_text: pricing.cta_text is defined and pricing.cta_text != null ? pricing.cta_text,
}
) }}
{% endif %}
</div>
</div>
</section>
{
"title": {
"text": "Page title",
"moustache": [
"Job title",
"Permanent"
]
}
}
.Training-header {
&__header {
display: flex;
flex-direction: column;
}
&__subtitle {
color: var(--grey);
}
&__metadata {
border-block: 1px solid var(--light-grey);
column-gap: var(--space-l);
display: flex;
flex-wrap: wrap;
padding-block: var(--space-s);
row-gap: var(--space-s);
}
}
No notes defined.