<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img text-image__image is-loading" alt="Test" 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 class="text-image__bottom-content">
<h4 class="text-image__title">Max Mustermann</h4>
<blockquote class="text-image__quote-container">
<p class="text-image__quote">«Das Seminar war sensationell und hat sehr viel Spass gemacht. Ich kann es nur weiterempfehlen!»</p>
</blockquote>
<div class="text-image__button">
<a href="#" class="button--primary-small" data-is-initialized="true">Mehr erfahren</a>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/multi-column-text-image/text-image/text-image.twig' %}
{
"headingLevel": "4",
"variant": "left-aligned",
"title": "Max Mustermann",
"quote": "Das Seminar war sensationell und hat sehr viel Spass gemacht. Ich kann es nur weiterempfehlen!",
"button": "<a href=\"#\" class=\"button--primary-small\" data-is-initialized=\"true\">Mehr erfahren</a>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg"
}
}
import './text-image.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/multi-column-text-image/text-image/text-image";
In comparison with the one column text image brick this doesn’t have a width restriction to 75% and can be used in various contexts