Banner

Demo styling 
<div class="row">
    <div class="col-12 col-6@lg">
        <div class="position-relative margin-bottom-md banner">
            <div class="position-absolute banner__content">
                <header>
                    <h3>Itaque aperiam doloremque odio ex.</h3>
                </header>
                <div class="banner__text">
                    <p>Sunt voluptas quas inventore qui sed et voluptas quas ipsum. Explicabo debitis dolores blanditiis tempore nam molestiae magni cumque minima.</p>
                </div>
                <ul class="elementButtonList list--reset">
                    <li>
                        <a href="/" class="elementButton">
                            <span class="elementButton-title">Button</span>
                            <svg width="13" height="11" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd">
                                    <path fill="#000" d="M0 5h12v1H0z" />
                                    <path stroke="#000" d="M7 10l5-4.5L7 1" />
                                </g>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
            <picture>
                <source srcset="/components/raw/banner/banner_image_1.jpeg" media="(max-width: 28.688rem)">
                <source srcset="/components/raw/banner/banner_image_1.jpeg" media="(max-width: 47.938rem)">
                <source srcset="/components/raw/banner/banner_image_1.jpeg" media="(max-width: 63.938rem)">
                <img src="/components/raw/banner/banner_image_1.jpeg" alt="" class="banner__image" />
            </picture>
        </div>
    </div>
    <div class="col-12 col-6@lg">
        <div class="position-relative margin-bottom-md banner">
            <div class="position-absolute banner__content">
                <header>
                    <h3>Itaque aperiam doloremque odio ex.</h3>
                </header>
                <div class="banner__text">
                    <p>Sunt voluptas quas inventore qui sed et voluptas quas ipsum. Explicabo debitis dolores blanditiis tempore nam molestiae magni cumque minima.</p>
                </div>
                <ul class="elementButtonList list--reset">
                    <li>
                        <a href="/" class="elementButton">
                            <span class="elementButton-title">Button</span>
                            <svg width="13" height="11" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd">
                                    <path fill="#000" d="M0 5h12v1H0z" />
                                    <path stroke="#000" d="M7 10l5-4.5L7 1" />
                                </g>
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
            <picture>
                <source srcset="/components/raw/banner/banner_image_2.jpeg" media="(max-width: 28.688rem)">
                <source srcset="/components/raw/banner/banner_image_2.jpeg" media="(max-width: 47.938rem)">
                <source srcset="/components/raw/banner/banner_image_2.jpeg" media="(max-width: 63.938rem)">
                <img src="/components/raw/banner/banner_image_2.jpeg" alt="" class="banner__image" />
            </picture>
        </div>
    </div>
</div>
 
<div class="row">
	{{#times columnAmount}}
		<div class="col-12 col-6@lg">
			<div class="position-relative margin-bottom-md banner">
				<div class="position-absolute banner__content">
					<header>
						<h3>{{title}}</h3>
					</header>
					<div class="banner__text">
						<p>{{text}}</p>
					</div>
					{{#> @button icon=true}}{{/@button}}
				</div>
				<picture>
					{{#if @first}}
						<source srcset="{{static 'banner_image_1.jpeg'}}"
								media="(max-width: {{breakpoint.sm}})">
						<source srcset="{{static 'banner_image_1.jpeg'}}"
								media="(max-width: {{breakpoint.md}})">
						<source srcset="{{static 'banner_image_1.jpeg'}}"
								media="(max-width: {{breakpoint.lg}})">
						<img src="{{static 'banner_image_1.jpeg'}}" alt="" class="banner__image" />
					{{else}}
						<source srcset="{{static 'banner_image_2.jpeg'}}"
								media="(max-width: {{breakpoint.sm}})">
						<source srcset="{{static 'banner_image_2.jpeg'}}"
								media="(max-width: {{breakpoint.md}})">
						<source srcset="{{static 'banner_image_2.jpeg'}}"
								media="(max-width: {{breakpoint.lg}})">
						<img src="{{static 'banner_image_2.jpeg'}}" alt="" class="banner__image" />
					{{/if}}
				</picture>
			</div>
		</div>
	{{/times}}
</div>
 
{
  "title": "Itaque aperiam doloremque odio ex.",
  "text": "Sunt voluptas quas inventore qui sed et voluptas quas ipsum. Explicabo debitis dolores blanditiis tempore nam molestiae magni cumque minima.",
  "breakpoint": {
    "sm": "28.688rem",
    "md": "47.938rem",
    "lg": "63.938rem"
  },
  "dimension": {
    "widthHeightSm": 435,
    "widthHeightMd": 743,
    "widthHeightLg": 999,
    "widthHeightXl": 576
  },
  "button": {
    "text": "Button"
  },
  "columnAmount": 2
}

No notes defined.