<div class="multi-column-banner--1">
<div class="multi-column-banner__container">
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/multi-column-banner/multi-column-banner.twig' %}
{
"headingLevel": 3,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
}
]
}
import './multi-column-banner.scss';
import MultiColumnBanner, {selector as sel} from 'cando-cx-components-library/components/modules/bricks/components/multi-column-banner/multi-column-banner';
export default MultiColumnBanner;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/multi-column-banner/multi-column-banner";
No notes defined.