ID23 - Promo Cards - 4 In Row
- Select the CARDS Group
- Select Promo Cards component
- Create a data source within a page or globally based on your requirements.
- Select Variant - 4 in row
- Click on MainImage - to update the image
- Click on Title / CTATitle - to update the text
- Click on Edit related items -
- To add link to the button click on insert link under CTA field and give path to the page
- click on save/close
- Go to styles select Background color variant as per your requirement
- Save it
Developer notes
<div class="component promo-cards four-in-row">
<div class="component-content">
<div class="container">
<div class="row">
<div class="promo-card ec-clickable-card">
<div class="media-section">
<picture>
<source media="(max-width: 480px)" srcset="">
<source media="(max-width: 1024px)" srcset="">
<img src="/components/-/media/feature/gpn/enterprise-components/cards/lg-rectangle-responsive.png?rev=fb8c7bf3005a48268f4de41f5c95a28b" alt="" loading="lazy">
</picture>
</div>
<div class="copy-section">
<h5 class="title">Promo Card 1</h5>
<div class="cta-list"></div>
</div>
</div>
<div class="promo-card ec-clickable-card">
<div class="media-section">
<picture>
<source media="(max-width: 480px)" srcset="">
<source media="(max-width: 1024px)" srcset="">
<img src="/components/-/media/feature/gpn/enterprise-components/cards/lg-rectangle-responsive.png?rev=fb8c7bf3005a48268f4de41f5c95a28b" alt="" loading="lazy">
</picture>
</div>
<div class="copy-section">
<h5 class="title">Promo Card 2</h5>
<div class="cta-list"></div>
</div>
</div>
<div class="promo-card ec-clickable-card">
<div class="media-section">
<picture>
<source media="(max-width: 480px)" srcset="">
<source media="(max-width: 1024px)" srcset="">
<img src="/components/-/media/feature/gpn/enterprise-components/cards/lg-rectangle-responsive.png?rev=fb8c7bf3005a48268f4de41f5c95a28b" alt="" loading="lazy">
</picture>
</div>
<div class="copy-section">
<h5 class="title">Promo Card 3</h5>
<div class="cta-list"></div>
</div>
</div>
<div class="promo-card ec-clickable-card">
<div class="media-section">
<picture>
<source media="(max-width: 480px)" srcset="">
<source media="(max-width: 1024px)" srcset="">
<img src="/components/-/media/feature/gpn/enterprise-components/cards/lg-rectangle-responsive.png?rev=fb8c7bf3005a48268f4de41f5c95a28b" alt="" loading="lazy">
</picture>
</div>
<div class="copy-section">
<h5 class="title">Promo Card 4</h5>
<div class="cta-list"></div>
</div>
</div>
</div>
</div>
</div>
</div>