Smart Page Card CTA Addition
This code allows for CTAs to be appended to a Smart Page card by adding a class pre-pended with a 'cta--' and then immediately followed by a hyphen separated CTA. For example, cta--Read-More would result in a "Read More" CTA being added to a card. The appended CTA will respect the capitalization of the class that is used.
You can further dictate the position of the CTA by adding an additional class to the card of either cta-center (which will center the CTA on the card) or cta-right (which will right align the CTA on the card). The CTA is aligned to the left by default.
The CTA is appended by a CSS ::after pseudo element to the main card element (which possesses a box class). It is then positioned absolutely at the bottom of the card.
Simply download the script below and copy, open up the container HTML on your Smart Page Group:
and paste it at the bottom of your Smart Page's container HTML:
<style>.box::after { content: attr(data-after-text); color: ENTER-THE-COLOR-OF-THE-CTA-HERE; font-weight: 700; position: absolute; bottom: 1.2rem; left: 1.5rem; width: calc(100% - 3rem); text-align: left; font-size: 20px; } .box.cta-right::after { text-align: right; } .box.cta-center::after { text-align: center; } </style> <script type="text/javascript"> let cards = document.getElementsByClassName("box"); window.onload = (event) => { for (card of cards) { if (card.className.match(new RegExp("cta--"))) { let cList = card.classList.value.split(" "); const cString = cList .find((value) => /^cta--/.test(value)) .toString() .replace(/cta--/i, "") .replace(/-/g, " "); card.setAttribute("data-after-text", cString); console.log(cString); } } }; </script>