ID8 - Media Banner - Offset Center 5 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 Center 5 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
- Select Background Color Variant
- Save it
Developer notes
<div class="component media-banner offset-center-5x5 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/md-8_5-offsetimage-left.png?rev=fe2a7db45832460a9edfbaeb77516fd0">
<source media="(max-width: 768px)" srcset="">
<img src="/components/-/media/feature/gpn/enterprise-components/mediabanners/md-8_5-offsetimage-left.png?rev=fe2a7db45832460a9edfbaeb77516fd0" alt="" 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>
</div>