ID11 - Media Banner Icon List

The quick brown fox jumps over

The quick brown fox jumps over the lazy dog

Primary


select project blur reesizing bullet. Text blur fill connection image. Bullet ellipse effect underline blur horizontal asset inspect main. Project auto strikethrough main underline fill follower. Object follower auto pen.

Icon 2

select project blur reesizing bullet. Text blur fill connection image. Bullet ellipse effect underline blur horizontal asset inspect main. Project auto strikethrough main underline fill follower. Object follower auto pen.

The quick brown fox jumps over

The quick brown fox jumps over the lazy dog

Primary


select project blur reesizing bullet. Text blur fill connection image. Bullet ellipse effect underline blur horizontal asset inspect main. Project auto strikethrough main underline fill follower. Object follower auto pen.

Icon 2

select project blur reesizing bullet. Text blur fill connection image. Bullet ellipse effect underline blur horizontal asset inspect main. Project auto strikethrough main underline fill follower. Object follower auto pen.

  • Select the Banners Group
  • Select Media Banner Icon List component
  • Create a data source within a page or globally based on your requirements.
  • Select variant - Offset Center 4 by 7
  • Click on MainImage / IconImage - to update the image
  • Click on Title / tag / IconTitle / IconDetails - to update the text
  • Go to styles -
    • For reverse component - use Reverse layout
​​

Developer notes

 

<div class="component media-banner media-banner-icon-list  offset-center-4x7">
  <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="icon-container">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none" data-inject-url="https://gpnsxa103sc.dev.local/components/-/media/feature/gpn/enterprise-components/iconography/clipboard.svg?iar=0&amp;rev=866a3ebf6a2542aab41d2c03cb38e92a" class="svgicon white-on-base">
                <g clip-path="url(#clip0_8419_134282--inject-1)">
                  <circle class="svg-icon-background" cx="48" cy="48" r="46.5" fill="#2668FF" stroke="#2668FF" stroke-width="3"></circle>
                  <path class="svg-icon-activation" d="M51 36C57.6274 36 63 30.6274 63 24C63 17.3726 57.6274 12 51 12C44.3726 12 39 17.3726 39 24C39 30.6274 44.3726 36 51 36Z" fill="#14E8FF"></path>
                  <path class="svg-icon-line" d="M27 30V30C25.3431 30 24 31.3431 24 33V75C24 76.6569 25.3431 78 27 78H63C64.6569 78 66 76.6569 66 75V75" stroke="white" stroke-width="3"></path>
                  <path class="svg-icon-line" d="M42 24H33C31.3431 24 30 25.3431 30 27V69C30 70.6569 31.3431 72 33 72H69C70.6569 72 72 70.6569 72 69V27C72 25.3431 70.6569 24 69 24H60" stroke="white" stroke-width="3"></path>
                  <path class="svg-icon-fill" d="M42 34.5C41.1716 34.5 40.5 35.1716 40.5 36C40.5 36.8284 41.1716 37.5 42 37.5V34.5ZM42 37.5H63V34.5H42V37.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M42 43.5C41.1716 43.5 40.5 44.1716 40.5 45C40.5 45.8284 41.1716 46.5 42 46.5V43.5ZM42 46.5H63V43.5H42V46.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M42 52.5C41.1716 52.5 40.5 53.1716 40.5 54C40.5 54.8284 41.1716 55.5 42 55.5V52.5ZM42 55.5H63V52.5H42V55.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M42 61.5C41.1716 61.5 40.5 62.1716 40.5 63C40.5 63.8284 41.1716 64.5 42 64.5V61.5ZM42 64.5H63V61.5H42V64.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M46.7561 21V22.5C47.3918 22.5 47.9585 22.0993 48.1703 21.4999L46.7561 21ZM55.2439 21L53.8297 21.4999C54.0415 22.0993 54.6082 22.5 55.2439 22.5V21ZM60 21H61.5C61.5 20.1716 60.8284 19.5 60 19.5V21ZM60 27V28.5C60.8284 28.5 61.5 27.8284 61.5 27H60ZM42 27H40.5C40.5 27.8284 41.1716 28.5 42 28.5V27ZM42 21V19.5C41.1716 19.5 40.5 20.1716 40.5 21H42ZM48.1703 21.4999C48.5829 20.3327 49.6961 19.5 51 19.5V16.5C48.3852 16.5 46.1648 18.1718 45.3418 20.5001L48.1703 21.4999ZM51 19.5C52.3039 19.5 53.4171 20.3327 53.8297 21.4999L56.6582 20.5001C55.8352 18.1718 53.6148 16.5 51 16.5V19.5ZM55.2439 22.5H60V19.5H55.2439V22.5ZM58.5 21V27H61.5V21H58.5ZM60 25.5H51V28.5H60V25.5ZM51 25.5H42V28.5H51V25.5ZM43.5 27V21H40.5V27H43.5ZM42 22.5H46.7561V19.5H42V22.5Z" fill="white"></path>
                </g>
                <defs>
                  <clipPath id="clip0_8419_134282--inject-1">
                    <rect class="svg-icon-fill" width="96" height="96" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg>
            </span>
            <div class="text-section">
              <p class="icon-title">Icon 1</p>
              <p class="icon-tag"></p>
            </div>
          </div>
          <div class="icon-container">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none" data-inject-url="https://gpnsxa103sc.dev.local/components/-/media/feature/gpn/enterprise-components/iconography/clipboard.svg?iar=0&amp;rev=866a3ebf6a2542aab41d2c03cb38e92a" class="svgicon white-on-base">
                <g clip-path="url(#clip0_8419_134282--inject-2)">
                  <circle class="svg-icon-background" cx="48" cy="48" r="46.5" fill="#2668FF" stroke="#2668FF" stroke-width="3"></circle>
                  <path class="svg-icon-activation" d="M51 36C57.6274 36 63 30.6274 63 24C63 17.3726 57.6274 12 51 12C44.3726 12 39 17.3726 39 24C39 30.6274 44.3726 36 51 36Z" fill="#14E8FF"></path>
                  <path class="svg-icon-line" d="M27 30V30C25.3431 30 24 31.3431 24 33V75C24 76.6569 25.3431 78 27 78H63C64.6569 78 66 76.6569 66 75V75" stroke="white" stroke-width="3"></path>
                  <path class="svg-icon-line" d="M42 24H33C31.3431 24 30 25.3431 30 27V69C30 70.6569 31.3431 72 33 72H69C70.6569 72 72 70.6569 72 69V27C72 25.3431 70.6569 24 69 24H60" stroke="white" stroke-width="3"></path>
                  <path class="svg-icon-fill" d="M42 34.5C41.1716 34.5 40.5 35.1716 40.5 36C40.5 36.8284 41.1716 37.5 42 37.5V34.5ZM42 37.5H63V34.5H42V37.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M42 43.5C41.1716 43.5 40.5 44.1716 40.5 45C40.5 45.8284 41.1716 46.5 42 46.5V43.5ZM42 46.5H63V43.5H42V46.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M42 52.5C41.1716 52.5 40.5 53.1716 40.5 54C40.5 54.8284 41.1716 55.5 42 55.5V52.5ZM42 55.5H63V52.5H42V55.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M42 61.5C41.1716 61.5 40.5 62.1716 40.5 63C40.5 63.8284 41.1716 64.5 42 64.5V61.5ZM42 64.5H63V61.5H42V64.5Z" fill="white"></path>
                  <path class="svg-icon-fill" d="M46.7561 21V22.5C47.3918 22.5 47.9585 22.0993 48.1703 21.4999L46.7561 21ZM55.2439 21L53.8297 21.4999C54.0415 22.0993 54.6082 22.5 55.2439 22.5V21ZM60 21H61.5C61.5 20.1716 60.8284 19.5 60 19.5V21ZM60 27V28.5C60.8284 28.5 61.5 27.8284 61.5 27H60ZM42 27H40.5C40.5 27.8284 41.1716 28.5 42 28.5V27ZM42 21V19.5C41.1716 19.5 40.5 20.1716 40.5 21H42ZM48.1703 21.4999C48.5829 20.3327 49.6961 19.5 51 19.5V16.5C48.3852 16.5 46.1648 18.1718 45.3418 20.5001L48.1703 21.4999ZM51 19.5C52.3039 19.5 53.4171 20.3327 53.8297 21.4999L56.6582 20.5001C55.8352 18.1718 53.6148 16.5 51 16.5V19.5ZM55.2439 22.5H60V19.5H55.2439V22.5ZM58.5 21V27H61.5V21H58.5ZM60 25.5H51V28.5H60V25.5ZM51 25.5H42V28.5H51V25.5ZM43.5 27V21H40.5V27H43.5ZM42 22.5H46.7561V19.5H42V22.5Z" fill="white"></path>
                </g>
                <defs>
                  <clipPath id="clip0_8419_134282--inject-2">
                    <rect class="svg-icon-fill" width="96" height="96" fill="white"></rect>
                  </clipPath>
                </defs>
              </svg>
            </span>
            <div class="text-section">
              <p class="icon-title">Icon 2</p>
              <p class="icon-tag"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>