ID8 - Media Banner - Offset Outer 4 by 5
- Select the BANNERS Group
- Select Media Banner component
- Create a data source within a page or globally based on your requirements.
- Select Variant - Offset Outer 4 by 5
- Click on Main Image - to update the image
- Click on Title / Tag - to update the text
- Go to style -
- Select Reverse Layout under the Media banner
- Save it
Developer notes
<div class="component media-banner offset-outer-4x5 reverse-layout">
<div class="component-content">
<div class="container">
<div class="row flip-textimage-in-mobile ">
<div class="media-section ">
<picture>
<source media="(max-width: 390px)" srcset="/components/-/media/feature/gpn/enterprise-components/mediabanners/image-callout-icon.png?rev=2241bd25d9ee402c885137e36458af5d">
<source media="(max-width: 768px)" srcset="/components/-/media/feature/gpn/enterprise-components/mediabanners/image-callout-icon.png?rev=2241bd25d9ee402c885137e36458af5d">
<img src="/components/-/media/feature/gpn/enterprise-components/mediabanners/image-callout-icon.png?rev=2241bd25d9ee402c885137e36458af5d" alt="Icon" loading="lazy">
</picture>
<div class="parallax-circle"></div>
</div>
<div class="copy-section">
<h4 class="title">The quick brown fox jumps over</h4>
<p class="tag">The quick brown fox jumps over the lazy dog</p>
<div class="cta-list cta-layout-horizontal"></div>
</div>
</div>
</div>
</div>