ID10 - Media Banner Steps

Mobile POS in minutes

Fast. Easy. Affordable.

The quick brown fox jumps over the lazy dog

Primary
1

Step 1

Visit your app store, and download the app.

2

Step 2

Pair the card reader with your mobile device.

3

Step 3

There’s no 3. It’s that fast!

Mobile POS in minutes

Fast. Easy. Affordable.

The quick brown fox jumps over the lazy dog

Primary
1

Step 1

Visit your app store, and download the app.

2

Step 2

Pair the card reader with your mobile device.

3

Step 3

There’s no 3. It’s that fast!

  • Select the Banners Group
  • Select Media Banner Steps Component
  • Create a data source within a page or globally based on your requirements.
  • Select any variant as per your requirement
  • For this we have selected variant - Offset Outer 4 by 5
  • Click on image to update it
  • Go to styles -
    • For reverse component - use Reverse layout
​​

Developer notes

 

<div class="component media-banner media-banner-steps offset-outer-4x5">

  <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="" />
            <source media="(max-width: 768px)" srcset="" />
            <img src="/components/-/media/feature/gpn/enterprise-components/mediabanners/xl-rectangle-responsiverectangle.png?rev=e34b370395e8420bbfa48b9ef54d9985" 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 class="step-container">
            <span class="icon"> 1 </span>
            <div class="text-section">
              <p class="title">Step 1</p>
              <p class="tag"></p>
            </div>
          </div>
          <div class="step-container">
            <span class="icon"> 2 </span>
            <div class="text-section">
              <p class="title">Step 2</p>
              <p class="tag"></p>
            </div>
          </div>
          <div class="step-container">
            <span class="icon"> 3 </span>
            <div class="text-section">
              <p class="title">Step 3</p>
              <p class="tag"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>