ID23 - Promo Cards - 2 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 - 2 in row
- Click on MainImage - to update the image
- Click on Title / CTATitle - to update the text
- Click on Edit related items -
- Go to the Data source and delete two cards
- 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 two-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">
<a href="/components/digital-build-guide" class="btn btn-cta-primary" title="Button" data-ea-link="/components/digital-build-guide/id23-promo-cards/2-in-row | Button | {BD9380C4-3D81-4A90-B5AA-AE8F64411BE6}">Button</a>
<a class="ec-card-link-overlay" href="/components/digital-build-guide" name="Link to button"></a>
</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">
<a href="/components/digital-build-guide" class="btn btn-cta-primary" title="Button" data-ea-link="/components/digital-build-guide/id23-promo-cards/2-in-row | Button | {BD9380C4-3D81-4A90-B5AA-AE8F64411BE6}">Button</a>
<a class="ec-card-link-overlay" href="/components/digital-build-guide" name="Link to button"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>