<h4 class="headline headline--4"><span class="headline__text">Das ist eine Überschrift</span></h4>
{% set level = level ??? 1 %}
{% set link = link ?? null %}
{% set linkType = linkType ?? link_type(link) %}
{% set size = size ?? 1 %}
{% set kickerPosition = kickerPosition ??? 'above' %}
{% set tag = tag ??? "h#{level}" -%}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: ['headline', size ? "headline--#{size}"],
}, attrs ?? {}) }}>
{%- if link -%}
<a {{ html_attributes({
href: link,
target: target ?? false,
class: {
'headline__link': true,
'u-overlay-link': overlay | default(false),
},
}, linkAttrs ?? link_attributes(link, type=linkType)) }}>
{%- endif -%}
{%- if kicker|default and kickerPosition == 'above' -%}
<span class="headline__kicker">
{{- kicker | breakerize | make_efellows_non_breakable -}}
<span class="u-hidden-visually">: </span></span>
{%- endif -%}
<span class="headline__text{{ link|default ? ' u-underline' }}{{ clampLines|default ? ' u-line-clamp' }}">
{{- text | componentize | nl2br | breakerize | make_efellows_non_breakable | highlight(tag='span', className='headline__highlight') -}}
</span>
{%- if kicker|default and kickerPosition == 'below' -%}
<span class="headline__kicker"><span class="u-hidden-visually">, </span>
{{- kicker | breakerize | make_efellows_non_breakable -}}
</span>
{%- endif -%}
{%- if link|default -%}
</a>
{%- endif -%}
</{{ tag }}>
{
"text": "Das ist eine Überschrift",
"size": 4,
"level": 4
}
:root {
--headline-color: currentColor;
--headline-font-size: 1.8rem;
--headline-font-weight: var(--font-weight-semibold);
--headline-highlight-font-weight: var(--font-weight-light);
--headline-kicker-font-size: 1.6rem;
--headline-kicker-font-weight: inherit;
--headline-kicker-letter-spacing: 0;
--headline-letter-spacing: -0.04em;
--headline-line-height: var(--line-height-small);
--headline-link-color: var(--link-color);
--headline-link-hover-color: var(--link-hover-color);
@include use-responsive-sizing(--headline-kicker-spacing, responsive-map(xs 1rem, l 2rem));
}
.headline {
color: var(--headline-color);
font-size: var(--headline-font-size);
font-weight: var(--headline-font-weight);
letter-spacing: var(--headline-letter-spacing);
line-height: var(--headline-line-height);
}
.headline--1 {
@include use-responsive-sizing(--headline-font-size, responsive-map(xs 3rem, xl 4.6rem));
}
.headline--2 {
@include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.6rem, xl 3.6rem));
}
.headline--3 {
@include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.2rem, xl 2.6rem));
}
.headline__link {
color: var(--headline-link-color);
display: block;
transition-property: color;
&:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
color: var(--headline-link-hover-color);
}
}
.headline__kicker {
display: block;
font-size: var(--headline-kicker-font-size);
font-weight: var(--headline-kicker-font-weight);
letter-spacing: var(--headline-kicker-letter-spacing);
line-height: var(--headline-kicker-line-height, inherit);
&:first-child {
margin-block-end: var(--headline-kicker-spacing);
}
&:last-child {
margin-block-start: var(--headline-kicker-spacing);
}
}
.headline__text {
--underline-color: transparent;
--underline-color--enter: currentColor;
--underline-height: 2px;
}
.headline__highlight {
color: var(--headline-highlight-color, var(--headline-color));
font-style: normal;
font-weight: var(--headline-highlight-font-weight);
}
No notes defined.