cardtemplate

Description

Greeting Card TemplateView SVG image and it will open in 3 seconds to show the inside of the card. Animated card can be used for any purpose. Modify text and images as needed. Openclipart has great images to use for any occasion. Use for any standard image SVG, JPEG, PNG, etc. - which is easier to implement.Use example for SVG images that use script. For security reasons, script wont run in an <image> tag, but will run in an <iframe> Change the font using any of the Google open source fonts at fonts.google.com</p> <div class="product-features"> <div class="feature-box bordertop-1 d-flex justify-content-start align-items-center"> <div class="feature borderright-1 px-md-5 px-2 ps-md-0"> <p class="mb-2 mt-0 fw-bold">SVG ID</p> <p class="m-0"> 173050 </p> </div> <div class="feature px-md-5 px-3"> <p class="mb-2 mt-0 fw-bold">Size</p> <p class="m-0">0.00 MB</p> </div> </div> <div class="feature-box bordertop-1 borderbottom-1 d-flex justify-content-start align-items-center"> <div class="feature borderright-1 px-md-5 px-2 ps-md-0"> <p class="mb-2 mt-0 fw-bold">No. of downloads:</p> <p class="m-0"> 45 </p> </div> <div class="feature px-md-5 px-3 pt-0"> <p class="mb-2 mt-0 fw-bold">Date:</p> <p class="m-0">18/05/2021 </p> </div> </div> <div class="feature-box bordertop-1 borderbottom-1 d-flex justify-content-start align-items-center"> <div class="feature borderright-1 px-md-5 px-2 ps-md-0"> <p class="mb-2 mt-0 fw-bold">License:</p> <p class="m-0">Public Domain </p> </div> <div class="feature px-md-5 px-3 pt-0"> <p class="mb-2 mt-0 fw-bold">SVG published by:</p> <p class="m-0"> <a href="https://freesvg.org/index.php/by/OpenClipart"> OpenClipart </a> </p> </div> </div> </div> <a href="/download/173050" class="btn btn-warning w-100 btn-lg mt-2">Download SVG</a> <div class="download-buttons d-flex justify-content-between align-items-center flex-wrap flex-md-nowrap gap-md-3 w-100 mt-md-2"> <a href="https://freesvg.org/index.php/converts/173050/2400" class="btn btn-dark w-100 mt-2">Large PNG <span class="size">2400px</span></a> <a href="https://freesvg.org/index.php/converts/173050/300" class="btn btn-dark w-100 mt-2">Small PNG <span class="size">300px</span></a> </div> </div> </div> </div> </div> </section> <section class="bg-light-grey py-5"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-md-6"> <img src="/upload/shutterstock-logo.svg" alt="Shutterstock Logo" class="img-fluid"> <h4 class="fw-bold text-uppercase mt-3"> <a href="https://shutterstock.7eer.net/c/2022575/1424089/1305" rel="sponsored" id="1424089" >Get 15% off </span>at Shutterstock! <br/> Use: FSVG15 at checkout!</a></h4> </div> <div class="col-md-6 mt-4 mt-md-0 d-flex flex-wrap flex-md-nowrap"> <div id="bento-grid" class="bento-grid"></div> </div> </div> </div> </section> <section class="my-5 text-center"> <div class="container d-flex justify-content-center align-items-start flex-column"> <h2> Related Tags</h2> <div class="d-flex flex-wrap me-auto my-4"> <a href="https://freesvg.org/index.php/tag/animated" class="m-1 btn btn-light">animated</a> <a href="https://freesvg.org/index.php/tag/animation" class="m-1 btn btn-light">animation</a> <a href="https://freesvg.org/index.php/tag/art" class="m-1 btn btn-light">art</a> <a href="https://freesvg.org/index.php/tag/birthday" class="m-1 btn btn-light">birthday</a> <a href="https://freesvg.org/index.php/tag/card" class="m-1 btn btn-light">card</a> <a href="https://freesvg.org/index.php/tag/cartoon" class="m-1 btn btn-light">cartoon</a> <a href="https://freesvg.org/index.php/tag/clip-art" class="m-1 btn btn-light">clip-art</a> <a href="https://freesvg.org/index.php/tag/dress" class="m-1 btn btn-light">dress</a> <a href="https://freesvg.org/index.php/tag/fonts" class="m-1 btn btn-light">fonts</a> <a href="https://freesvg.org/index.php/tag/illustration" class="m-1 btn btn-light">illustration</a> <a href="https://freesvg.org/index.php/tag/magenta" class="m-1 btn btn-light">magenta</a> <a href="https://freesvg.org/index.php/tag/pink" class="m-1 btn btn-light">pink</a> <a href="https://freesvg.org/index.php/tag/fictional-character" class="m-1 btn btn-light">Fictional character</a> <a href="https://freesvg.org/index.php/tag/animations-to-study" class="m-1 btn btn-light"> Animations to study</a> <a href="https://freesvg.org/index.php/tag/google-fonts" class="m-1 btn btn-light"> google fonts</a> </div> </div> </section> <section class="my-5 text-center"> <div class="container"> <h2 class="text-start">Related SVG images</h2> <div class="row row-cols-sm-4 row-cols-lg-5 my-4"> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="cartoon-animation-video"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/InTheTrain2.png" alt="Cartoon animation video" title="Cartoon animation video" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="cartoon-animation-video">Cartoon animation video</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="1539605222"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/1539605222.png" alt="Cute angel" title="Cute angel" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="1539605222">Cute angel</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="cartoon-kid-character"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/1532582198.png" alt="Cartoon kid character" title="Cartoon kid character" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="cartoon-kid-character">Cartoon kid character</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="1528949261"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/1528949261.png" alt="Penrose Animation" title="Penrose Animation" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="1528949261">Penrose Animation</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="000"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/000.png" alt="A017: Baaang! (Animation SMIL)" title="A017: Baaang! (Animation SMIL)" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="000">A017: Baaang! (Animation SMIL)</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="550315"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/550315.png" alt="550315" title="550315" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="550315">550315</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="sunflower-girl"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/Sunflower-Girl.png" alt="Sunflower Girl" title="Sunflower Girl" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="sunflower-girl">Sunflower Girl</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="1546652824"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/1546652824.png" alt="Mail Mouse" title="Mail Mouse" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="1546652824">Mail Mouse</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="dress-zm"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/Dress-zm.png" alt="Dress zm" title="Dress zm" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="dress-zm">Dress zm</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="pengucorn"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/pengucorn.png" alt="pengucorn" title="pengucorn" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="pengucorn">pengucorn</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="27-1"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/27-.1.png" alt="27 1" title="27 1" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="27-1">27 1</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="cartoon-man-with-beard-1574352519"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/senhor3.png" alt="Cartoon man with beard-1574352519" title="Cartoon man with beard-1574352519" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="cartoon-man-with-beard-1574352519">Cartoon man with beard-1574352519</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="1430974408"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/1430974408.png" alt="570622" title="570622" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="1430974408">570622</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="1467945058"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/1467945058.png" alt="fire" title="fire" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="1467945058">fire</a> </div> </div> </div> <div class="col-6"> <div class="svg-image-box mb-4"> <a href="yellow-haired-boy-1632588416"> <div class="ratio ratio-1x1"> <img src="/storage/img/thumb/Boy-2.png" alt="Yellow-haired boy-1632588416" title="Yellow-haired boy-1632588416" loading="lazy"> </div> </a> <div class="text-start p-2 position-absolute bottom-0 start-0"> <a class="btn btn-warning" href="yellow-haired-boy-1632588416">Yellow-haired boy-1632588416</a> </div> </div> </div> </div> </div> </section> <section class="images my-4 py-2"> <div class="container-fluid"> <div class="row d-flex align-items-center slider-row"> <div class="col-md-3"> <img src="/upload/shutterstock-logo.svg" alt="Shutterstock logo" class="img-fluid" loading="lazy"> <h5 class="fw-500 text-uppercase mt-3 break-word"><a href="https://shutterstock.7eer.net/c/2022575/1424089/1305" rel="sponsored" id="1424089" > <span style="text-decoration: underline; color: inherit;">Get 15% off </span>at Shutterstock! <br/> Use: FSVG15 at checkout!</a> </h5> </div> <div class="image-container col-md-9 mt-3 mt-md-0"> <div class="swiper mySwiper"> <div class="swiper-wrapper" id="data-container"> </div> </div> </div> </div> </div> </section> <footer class="bg-black text-white py-5"> <div class="container"> <div class="row align-items-top gy-3"> <div class="col-md-4"> <div class="mb-4"><a href="index.html"><img alt="Free SVG Logo Image" src="/upload/white-free_svg-logo.png" loading="lazy" class="img-fluid navbar-brand footer-logo"></a> </div> <p class="pe-lg-3">FreeSVG.org offers free vector images in SVG format with Creative Commons 0 license (public domain). You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.<br /><br />It is absolutely not required, but if you like this website, any mention of or link back is highly appreciated.</p> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-6"> <h5 class="mb-4 text-uppercase">USEFUL LINKS</h5> <div class="mb-4"> <p class="mb-1"><a class="nav-link" rel="nofollow" href="http://inkscape.org/">Inkscape</a></p> <p class="mb-1"><a class="nav-link" rel="nofollow" href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">What is SVG</a></p> <p class="mb-1"><a class="nav-link" rel="nofollow" href="https://svgedit.netlify.app/editor/index.html">SVG Edit</a></p> <p class="mb-1"><a class="nav-link" rel="nofollow" href="http://www.drawsvg.org/drawsvg.html">Draw SVG</a></p> <p class="mb-1"><a class="nav-link" rel="nofollow" href="http://www.w3.org/Graphics/SVG/">SVG Logo</a></p> </div> </div> <div class="col-md-6"> <h5 class="mb-4 text-uppercase">SITE LINKS</h5> <div class="mb-4"> <p class="mb-1"><a class="nav-link" href="/">Home</a></p> <p class="mb-1"><a class="nav-link" href="/pages/about-us">About</a></p> <p class="mb-1"><a class="nav-link" href="/contact">Contact</a></p> <p class="mb-1"><a class="nav-link" rel="nofollow" href="https://creativecommons.org/publicdomain/zero/1.0/ " target="_blank">Public domain license</a></p> <p class="mb-1"><a class="nav-link" rel="nofollow" href="https://forum.freesvg.org " target="_blank">Forum</a></p> </div> </div> </div> </div> <div class="col-md-4"> <div class="mb-4"> <a rel="sponsored" href="https://shutterstock.7eer.net/c/2022575/920029/1305" target="_blank" id="920029"><img src="//a.impactradius-go.com/display-ad/1305-920029" border="0" alt="" width="300" height="250"/></a><img height="0" width="0" src="https://shutterstock.7eer.net/i/2022575/920029/1305" style="position:absolute;visibility:hidden;" border="0" /> </div> </div> </div> <hr> <div class="text-center text-md-start clearfix"> <p class="float-md-start text mb-0 pb-2"><span class="text-warning">Free SVG</span> 2019- <script>document.write(new Date().getFullYear())</script> </p> <p class="text-center float-md-end mb-0 pb-2 small"><a href="/pages/api-and-usage">API </a>   <a href="/pages/terms-and-conditions">Terms and conditions</a>   <a href="/pages/privacy-policy">Privacy Policy</a></p> </div> </div> </footer> <script> let svgSlug = "cardtemplate"; // Assuming the slug is available in this variable const apiUrl = `https://freesvg.org//get-images/${svgSlug}`; let svgTitle = "cardtemplate"; // Assuming the slug is available in this variable const apiUrl2 = `https://freesvg.org//get-images/${svgTitle}`; </script> <script> document.addEventListener("DOMContentLoaded", function () { // Function to get CSRF token from meta tag function getCsrfToken() { return document.querySelector('meta[name="csrf-token"]').getAttribute("content"); } // Like button functionality document.querySelectorAll(".like").forEach(function (likeBtn) { likeBtn.addEventListener("click", function (event) { event.preventDefault(); var id = likeBtn.getAttribute("data-id"); var likeCounter = document.getElementById("like" + id + "-bs3"); var heartIcon = document.getElementById("like" + id); var count = parseInt(likeCounter.innerHTML, 10); fetch("/like", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"), }, body: JSON.stringify({ id: id }), }) .then(response => response.json()) .then(data => { if (data.success < 1) { likeCounter.innerHTML = count - 1; heartIcon.classList.remove("fa-solid"); heartIcon.classList.add("fa-regular"); } else if (data.success > 0) { likeCounter.innerHTML = count + 1; heartIcon.classList.remove("fa-regular"); heartIcon.classList.add("fa-solid"); } }) .catch(error => console.error("Error:", error)); }); }); // Claim button functionality document.querySelectorAll(".claim").forEach(function (claimBtn) { claimBtn.addEventListener("click", function () { var id = claimBtn.getAttribute("id"); var user = claimBtn.getAttribute("user"); var nota = document.getElementById("nota"); fetch("/claim", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": getCsrfToken(), }, body: JSON.stringify({ id: id, user: user }), }) .then(response => response.json()) .then(data => { nota.classList.add("alert", "alert-success"); nota.innerHTML = data.success; nota.style.display = "block"; }) .catch(error => console.error("Error:", error)); }); }); }); </script>  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/js/index.js"></script> <div class="js-cookie-consent cookie-consent"> <span class="cookie-consent__message"> Your experience on this site will be improved by allowing cookies. </span> <button class="js-cookie-consent-agree cookie-consent__agree btn btn-green btn-lg"> Allow cookies </button> </div> <script> window.laravelCookieConsent = (function () { const COOKIE_VALUE = 1; const COOKIE_DOMAIN = 'freesvg.org'; function consentWithCookies() { setCookie('laravel_cookie_consent', COOKIE_VALUE, 7300); hideCookieDialog(); } function cookieExists(name) { return (document.cookie.split('; ').indexOf(name + '=' + COOKIE_VALUE) !== -1); } function hideCookieDialog() { const dialogs = document.getElementsByClassName('js-cookie-consent'); for (let i = 0; i < dialogs.length; ++i) { dialogs[i].style.display = 'none'; } } function setCookie(name, value, expirationInDays) { const date = new Date(); date.setTime(date.getTime() + (expirationInDays * 24 * 60 * 60 * 1000)); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';domain=' + COOKIE_DOMAIN + ';path=/'; } if (cookieExists('laravel_cookie_consent')) { hideCookieDialog(); } const buttons = document.getElementsByClassName('js-cookie-consent-agree'); for (let i = 0; i < buttons.length; ++i) { buttons[i].addEventListener('click', consentWithCookies); } return { consentWithCookies: consentWithCookies, hideCookieDialog: hideCookieDialog }; })(); </script> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-15417342d295584c702","applicationID":"525287958","transactionName":"ZgMAZUFTWUJTUhcIXl9JI1JHW1hfHVcRDl9FAwxVHUFBVhxCCw5G","queueTime":0,"applicationTime":110,"atts":"SkQDEwlJSkw=","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html>