No notes defined.
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div style="">
<div class="ctaInset">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Klick mich!</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-arrow-square-out">
<use href="../../icons/icons.svg#icon--arrow-square-out" xlink:href="../../icons/icons.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Öffne mich!</span></a>
</div>
<div class="ctaInset">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Klick mich!</span></a>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Full Width</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div style="padding-top: var(--sp-section);">
<div class="ctaInset is-full-width">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Klick mich!</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-arrow-square-out">
<use href="../../icons/icons.svg#icon--arrow-square-out" xlink:href="../../icons/icons.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Öffne mich!</span></a>
</div>
</div>
</section>
{{#variants}}
<section class="doc-variant{{#if narrow-preview}} doc-narrow-content{{/if}}">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
<div style="{{#if add-margin}}padding-top: var(--sp-section);{{/if}}">
{{#samples}}
{{render '@ctainset' (contextData '@ctainset' this) merge=true}}
{{/samples}}
</div>
</section>
{{/variants}}
{
"ctas": [
{
"label": "Klick mich!",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
{
"modifier": "is-secondary",
"label": "Öffne mich!",
"icon": {
"position": "right",
"id": "arrow-square-out"
}
}
],
"variants": [
{
"title": "Default",
"samples": [
{
"ctas": [
{
"label": "Klick mich!",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
{
"modifier": "is-secondary",
"label": "Öffne mich!",
"icon": {
"position": "right",
"id": "arrow-square-out"
}
}
]
},
{
"ctas": [
{
"label": "Klick mich!",
"icon": {
"position": "right",
"id": "arrow-right"
}
}
]
}
]
},
{
"title": "Full Width",
"add-margin": true,
"samples": {
"ctas": [
{
"label": "Klick mich!",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
{
"modifier": "is-secondary",
"label": "Öffne mich!",
"icon": {
"position": "right",
"id": "arrow-square-out"
}
}
],
"is-full-width": true
}
}
]
}
@import "_ctaInset.styles";
%ctaInset--full-width {
@include stack-spacing(0);
padding-top: calc(var(--pp) + var(--bw-large));
padding-bottom: var(--pp);
@include apply-theme(dark);
background-color: transparent;
@include full-width-backdrop();
.button {
@extend %button--small;
}
@include only-on-desktop(){
justify-content: flex-end;
padding-block: var(--bp);
&.hidden-on-desktop {
display: none;
}
}
}
.ctaInset {
&.is-full-width {
@extend %ctaInset--full-width;
}
&.is-sticky {
@extend %ctaInset--full-width;
position: sticky;
top: var(--siteHeader-height, 0);
@include z-index(ctaInset);
@include only-on-desktop(){
top: var(--siteHeader-visible-height, 0);
transition: var(--siteHeader-transition);
transition-property: top;
&.hidden-on-desktop {
display: none;
}
}
}
&-boundingbox {
position: relative;
top: 0;
}
}
@include only-on-desktop(){
.siteHeader:has(.siteHeader-ctas).is-simple ~ * .ctaInset {
&.is-full-width,
&.is-sticky {
display: none;
}
}
}
%ctaInset {
@extend %buttonGroup;
@include stack-spacing(section);
justify-content: center;
}
.ctaInset {
@extend %ctaInset;
}