No notes defined.
<div class="logoBanner has-backdrop" data-theme="transparent">
<h2 class="logoBanner-title">Ich bin der Titel</h2>
<div class="logoBanner-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="logoBanner-items">
<div class="logoBanner-item" style="background-image: url(/images/placeholder/logo-001.svg);">
<span class="logoBanner-label">Acme Co</span>
</div>
<div class="logoBanner-item" style="background-image: url(/images/placeholder/logo-002.svg);">
<span class="logoBanner-label">Acme Co</span>
</div>
<div class="logoBanner-item" style="background-image: url(/images/placeholder/logo-003.svg);">
<span class="logoBanner-label">Acme Co</span>
</div>
<div class="logoBanner-item" style="background-image: url(/images/placeholder/logo-004.svg);">
<span class="logoBanner-label">Acme Co</span>
</div>
<div class="logoBanner-item" style="background-image: url(/images/placeholder/logo-005.svg);">
<span class="logoBanner-label">Acme Co</span>
</div>
<div class="logoBanner-item" style="background-image: url(/images/placeholder/logo-006.svg);">
<span class="logoBanner-label">Acme Co</span>
</div>
</div>
<div class="logoBanner-ctas">
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Alle anzeigen</span></a>
</div>
</div>
<div class="logoBanner has-backdrop{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#title}}
<h2 class="logoBanner-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div class="logoBanner-description">{{{.}}}</div>
{{/description}}
{{#if items}}
<div class="logoBanner-items">
{{#items}}
<div class="logoBanner-item" style="background-image: url({{logo}});">
{{#link}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}}{{#label}} title="{{.}}"{{/label}}>{{/link}}
{{#label}}<span class="logoBanner-label">{{.}}</span>{{/label}}
{{#link}}</a>{{/link}}
</div>
{{/items}}
</div>
{{/if}}
{{#if ctas}}
<div class="logoBanner-ctas">
{{#ctas}}
{{render '@button--link' (contextData '@logobanner' this) merge=true}}
{{/ctas}}
</div>
{{/if}}
</div>
{
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"items": [
{
"label": "Acme Co",
"logo": "/images/placeholder/logo-001.svg"
},
{
"label": "Acme Co",
"logo": "/images/placeholder/logo-002.svg"
},
{
"label": "Acme Co",
"logo": "/images/placeholder/logo-003.svg"
},
{
"label": "Acme Co",
"logo": "/images/placeholder/logo-004.svg"
},
{
"label": "Acme Co",
"logo": "/images/placeholder/logo-005.svg"
},
{
"label": "Acme Co",
"logo": "/images/placeholder/logo-006.svg"
}
],
"ctas": [
{
"label": "Alle anzeigen",
"url": "#",
"modifier": "is-secondary",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
}
}
],
"theme": "transparent"
}
@import "_logoBanner.styles";
.logoBanner {
@include stack-spacing(section);
&:not([data-theme="transparent"]) {
@include full-width-backdrop($set-padding: true);
}
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
margin-bottom: var(--sp-component);
}
&-description {
@extend %pageSection-description;
margin-bottom: var(--sp-component);
}
&-items {
$max-items: 6;
display: flex;
flex-wrap: wrap;
gap: var(--gg);
justify-content: center;
> * {
min-width: 156px;
width: calc((100% - #{$max-items - 1} * var(--gg)) / #{$max-items});
}
}
&-item {
$size: 80%;
aspect-ratio: 1;
background: white center center no-repeat;
background-size: 0;
border-radius: var(--br);
position: relative;
a::before,
&::before {
content: "";
display: block;
width: $size;
height: $size;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
background: inherit;
background-size: contain;
}
a {
display: block;
position: absolute;
z-index: 1;
inset: 0;
background: inherit;
background-size: 0;
border-radius: inherit;
transform: scale(1);
transition: transform $_transition-duration;
&:hover {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
}
&-label {
@extend %visually-hidden;
}
&-ctas {
@extend %buttonGroup;
justify-content: center;
}
> .ctaInset {
@include stack-spacing(component);
}
@include not-on-desktop(){
&-description {
text-align: center;
}
&-ctas {
display: flex;
justify-content: center;
.button {
width: auto;
}
}
}
}