<div class="multi-column-image-overlay">
<div class="multi-column-image-overlay__container">
<ul class="multi-column-image-overlay__list--4">
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Salomons neue Wanderschuhe haben es in sich</h3>
<div class="multi-column-image-overlay__sub-title">Velo-Taschen und Körbe von AGU - Jetzt entdecken!</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Salomons neue Wanderschuhe haben es in sich" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Salomons neue Wanderschuhe haben es in sich</h3>
<div class="multi-column-image-overlay__sub-title">Velo-Taschen und Körbe von AGU - Jetzt entdecken!</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Salomons neue Wanderschuhe haben es in sich" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Salomons neue Wanderschuhe haben es in sich</h3>
<div class="multi-column-image-overlay__sub-title">Velo-Taschen und Körbe von AGU - Jetzt entdecken!</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Salomons neue Wanderschuhe haben es in sich" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Salomons neue Wanderschuhe haben es in sich</h3>
<div class="multi-column-image-overlay__sub-title">Velo-Taschen und Körbe von AGU - Jetzt entdecken!</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Salomons neue Wanderschuhe haben es in sich" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/multi-column-image-overlay/multi-column-image-overlay.twig' %}
{
"headingLevel": 3,
"items": [
{
"title": "Salomons neue Wanderschuhe haben es in sich",
"href": "#",
"subTitle": "Velo-Taschen und Körbe von AGU - Jetzt entdecken!",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Salomons neue Wanderschuhe haben es in sich"
}
},
{
"title": "Salomons neue Wanderschuhe haben es in sich",
"href": "#",
"subTitle": "Velo-Taschen und Körbe von AGU - Jetzt entdecken!",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Salomons neue Wanderschuhe haben es in sich"
}
},
{
"title": "Salomons neue Wanderschuhe haben es in sich",
"href": "#",
"subTitle": "Velo-Taschen und Körbe von AGU - Jetzt entdecken!",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Salomons neue Wanderschuhe haben es in sich"
}
},
{
"title": "Salomons neue Wanderschuhe haben es in sich",
"href": "#",
"subTitle": "Velo-Taschen und Körbe von AGU - Jetzt entdecken!",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Salomons neue Wanderschuhe haben es in sich"
}
}
]
}
import './multi-column-image-overlay.scss';
import MultiColumnImageOverlay, {selector as sel} from 'cando-cx-components-library/components/modules/bricks/components/multi-column-image-overlay/multi-column-image-overlay';
export default MultiColumnImageOverlay;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/multi-column-image-overlay/multi-column-image-overlay";
Title max characters(with spaces): 16
Sub-Title max characters(with spaces): 20