<a class="navigation-button" title="Nächste Seite" href="#">
<svg class="icon icon--caret-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-right"></use>
</svg></a>
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set tag = link ? 'a' : (tag ??? 'button') -%}
<{{ tag }} {{ html_attributes({
class: 'navigation-button',
type: tag == 'button' ? (type ??? 'button'),
title: title,
disabled: disabled ?? null,
tabindex: tabindex ?? null,
href: link,
id: id ?? false,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
{% include '@icon' with { icon: icon ?? "caret-#{direction}" } only %}
</{{ tag }}>
{
"direction": "right",
"link": "#",
"title": "Nächste Seite"
}
.navigation-button {
align-items: center;
background-color: var(--navigation-button-background-color, var(--color-midnight));
block-size: var(--navigation-button-size, 6rem);
border-radius: 50%;
color: var(--navigation-button-color, var(--color-white));
display: inline-flex;
font-size: var(--navigation-button-icon-size, 2.4rem);
inline-size: var(--navigation-button-size, 6rem);
justify-content: center;
line-height: 0;
touch-action: manipulation;
transition-property: background-color, color, opacity;
user-select: none;
&:is([disabled]) {
background-color: var(--navigation-button-background-color--disabled, var(--color-grey-x-light));
color: var(--navigation-button-color--disabled, var(--color-grey-dark));
}
&:is(:hover:not([disabled]), :focus-visible:not(.has-invisible-focus)) {
background-color: var(--navigation-button-background-color--engaged, var(--color-orange));
color: var(--navigation-button-color--engaged, var(--color-white));
}
}
No notes defined.