1<style>
2 .${randomNamespace}.heroes-banner { 3
4 }
5 .${randomNamespace}.heroes-banner img { 6 border-radius: 8px;
7 width: 100%;
8 }
9 .${randomNamespace}.heroes-banner .caption { 10 color: #fff;
11 font-size: 32px;
12 font-style: normal;
13 font-weight: 400;
14 position: absolute;
15 left: 0;
16 right: 0;
17 bottom: 0;
18 padding: 0 60px 5vh 60px;
19 }
20 .${randomNamespace}.heroes-banner .caption .caption-text { 21 /*padding-right: 40px;*/
22 }
23 .${randomNamespace}.heroes-banner a.cta-button { 24 }
25 .${randomNamespace}.heroes-banner a.cta-button:after { 26 content: '>';
27 width: 40px;
28 height: 40px;
29 gap: 10px;
30 color: #000;
31 background-color: #fff;
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 font-size: 35px;
36 border-radius: 50px;
37 font-weight: 200;
38 }
39 @media (max-width: 991px) { 40 .${randomNamespace}.heroes-banner .col-12 ~ .col-12 { 41 margin-top: 8px;
42 }
43 .${randomNamespace}.heroes-banner .caption { 44 padding: 0 30px 1vh 30px;
45 }
46 .${randomNamespace}.heroes-banner .caption .caption-text { 47 font-size: 24px;
48 }
49 }
50</style>
51
52<div class="container-fluid ${randomNamespace} heroes-banner"> 53 <div class="row">
54 <#if Box.getSiblings()?has_content>
55 <#list Box.getSiblings() as Lancio>
56 <div class="col-12 col-lg-6 d-flex flex-column">
57 <#if (Lancio.Image.getData())?? && Lancio.Image.getData() != "">
58 <img alt="${Lancio.Image.getAttribute("alt")}" data-fileentryid="${Lancio.Image.getAttribute("fileEntryId")}" src="${Lancio.Image.getData()}" /> 59 </#if>
60 <div class="caption d-flex flex-row justify-content-between align-items-center">
61 <span class="caption-text">${Lancio.Text.getData()}</span> 62 <a data-senna-off="true" data-senna-off="true" class="cta-button" title="${Lancio.Text.getData()}" href="${Lancio.Link.getFriendlyUrl()}"></a> 63 </div>
64 </div>
65 </#list>
66 </#if>
67 </div>
68</div>
69
70<script>
71 $(".${randomNamespace}.heroes-banner").on('click', 'a.cta-button', function(event) { 72 if (typeof sendMeasurementEventComponentClick === 'function') { 73 var subTitle =$(this).closest('.caption').find('.caption-text').text(); 74 sendMeasurementEventComponentClick('Launch Card', 'no_title', subTitle, 'no_text', '${Lancio.Link.getFriendlyUrl()}'); 75 } else { 76 console.error('sendMeasurementEventComponentClick not defined'); 77 }
78 });
79</script>
