<h3 class="headline" data-headline-size="3"><span class="headline__kicker">This is a kicker line<span class="u-hidden-visually">: </span></span><span class="headline__text">And this is the headline<br />
<em class="headline__highlight">with highlight</em></span><span class="headline__subhead"><span class="u-hidden-visually">, </span>Also a subhead is possible</span></h3>
{% set level = max(1, min(6, level | default(1) | string | integer)) %}
{% set size = size|default ? max(1, min(6, size | default(1) | string | integer)) %}
{% set tag = tag ??? "h#{level}" %}
{% set kickerTag = kickerTag ??? 'span' %}
{% set subheadTag = subheadTag ??? 'span' %}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: 'headline',
'data-headline-size': size,
}, attrs ?? {}) }}>
{%- if kicker|default -%}
<{{ kickerTag }} {{ html_attributes({
class: 'headline__kicker',
}, kickerAttrs ?? {}) }}>
{{- kicker | nl2br | wrap_text(control_sequence='__', class_name='headline__highlight') -}}
<span class="u-hidden-visually">: </span></{{ kickerTag }}>
{%- endif -%}
{%- if icon|default -%}
<span class="headline__icon">
{%- include '@icon' with { icon: icon } only -%}
</span>
{%- endif -%}
<span {{ html_attributes({
class: {
'headline__text': true,
'u-underline': underline ?? false,
'u-line-clamp': clampLines ?? false,
},
}) }}>
{{- text | componentize(inline_only=true) | trim | nl2br | wrap_text(control_sequence='__', class_name='headline__highlight') -}}
</span>
{%- if subhead|default -%}
<{{ subheadTag }} {{ html_attributes({
class: 'headline__subhead',
}, subheadAttrs ?? {}) }}><span class="u-hidden-visually">, </span>
{{- subhead | nl2br | wrap_text(control_sequence='__', class_name='headline__highlight') -}}
</{{ subheadTag }}>
{%- endif -%}
</{{ tag }}>
{
"kicker": "This is a kicker line",
"text": "And this is the headline\n__with highlight__\n",
"subhead": "Also a subhead is possible",
"size": 3,
"level": 3
}
.headline {
color: var(--headline-color, var(--color-steel-700));
display: var(--headline-display, block);
font-size: var(--headline-font-size, inherit);
font-weight: var(--headline-font-weight, var(--font-weight-bold));
hyphens: var(--headline-hyphens, manual);
letter-spacing: var(--headline-letter-spacing, 0);
line-height: var(--headline-line-height, var(--line-height-narrow));
text-transform: var(--headline-text-transform, none);
text-wrap: var(--headline-text-wrap, wrap);
transition-property: color;
&:is([data-headline-size='1']) {
font-size: var(--font-size-headline-1);
}
&:is([data-headline-size='2']) {
font-size: var(--font-size-headline-2);
}
&:is([data-headline-size='3']) {
font-size: var(--font-size-headline-3);
}
&:is([data-headline-size='4']) {
font-size: var(--font-size-headline-4);
}
&:is([data-headline-size='5']) {
font-size: var(--font-size-headline-5);
}
&:is([data-headline-size='6']) {
font-size: var(--font-size-headline-6);
}
}
.headline__icon {
font-size: 0.8em;
line-height: 0;
margin-inline-end: 0.3em;
vertical-align: 0.1em;
}
.headline__text {
--underline-offset: 0.15em;
background-color: var(--headline-text-background-color, transparent);
box-decoration-break: clone;
padding-block: var(--headline-text-padding-block, 0);
padding-inline: var(--headline-text-padding-inline, 0);
}
.headline__kicker {
background-color: var(--headline-kicker-background-color, transparent);
box-decoration-break: clone;
color: var(--headline-kicker-color, inherit);
display: block;
font-family: var(--headline-kicker-font-family, var(--root-font-family));
font-size: var(--headline-kicker-font-size, var(--font-size-default));
font-weight: var(--headline-kicker-font-weight, var(--font-weight-semibold));
letter-spacing: var(--headline-kicker-letter-spacing, 0);
margin-block-end: var(--headline-kicker-spacing, 1em);
margin-inline-end: var(--headline-kicker-offset, 0);
margin-inline-start: var(--headline-kicker-inset, 0);
padding-block: var(--headline-kicker-padding-block, 0);
padding-inline: var(--headline-kicker-padding-inline, 0);
text-transform: var(--headline-kicker-text-transform, none);
}
.headline__highlight {
color: var(--headline-highlight-color, var(--color-orange-600));
font-style: normal;
}
.headline__subhead {
background-color: var(--headline-subhead-background-color, transparent);
box-decoration-break: clone;
color: var(--headline-subhead-color, inherit);
display: block;
font-family: var(--headline-subhead-font-family, var(--root-font-family));
font-size: var(--headline-subhead-font-size, clamp(1.6rem, 0.6em, 2.4rem));
font-weight: var(--headline-subhead-font-weight, var(--font-weight-bold));
letter-spacing: var(--headline-subhead-letter-spacing, 0);
margin-block-start: var(--headline-subhead-spacing, clamp(0.8rem, 0.7em, 1.6rem));
margin-inline-end: var(--headline-subhead-offset, 0);
margin-inline-start: var(--headline-subhead-inset, 0);
padding-block: var(--headline-subhead-padding-block, 0);
padding-inline: var(--headline-subhead-padding-inline, 0);
text-transform: var(--headline-subhead-text-transform, none);
}
No notes defined.