<div class="additional-content ">
<picture class="image additional-content__image">
<source data-srcset="/images/product-view/banner.jpg" media="(min-width: 768px)" />
<img class="lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="" alt="image alt text" />
</picture>
<div class="additional-content__info ">
<div class="additional-content__section ">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="additional-content__section ">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<div class="additional-content {{ class }}">
{{ render '@image--picture' image }}
<div class="additional-content__info {{ contentInfo.class }}">
<div class="additional-content__section {{ firstSection.class }}">
{{{ firstSection.html }}}
</div>
<div class="additional-content__section {{ secondSection.class }}">
{{{ secondSection.html }}}
</div>
</div>
</div>
{
"class": "",
"contentInfo": {
"class": ""
},
"image": {
"class": "additional-content__image",
"defaultSrc": "",
"sources": [
{
"src": "/images/product-view/banner.jpg",
"mediaQuery": "(min-width: 768px)"
}
],
"alt": "image alt text"
},
"firstSection": {
"class": "",
"html": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>"
},
"secondSection": {
"class": "",
"html": "<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>"
}
}
$additional-content__image-margin : 0 0 41px !default;
$additional-content__image-margin\@large : 0 0 32px !default;
$additional-section-width : 48% !default;
.additional-content {
&__image {
margin: $additional-content__image-margin;
@include mq($screen-l) {
margin: $additional-content__image-margin\@large;
}
}
&__info {
@include mq($screen-l) {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
}
&__section {
@include mq($screen-l) {
flex: 0 0 $additional-section-width;
}
}
}
There are no notes for this item.