Made by Jason's Plugins For Carrd
A free Carrd plugin template for making a sticky top banner. Great for marketing promos like Black Friday, announcements or notifications. Scroll down to see the sticky functionality.
See tutorial →
Some placeholder content here to demo the sticky top banner:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices suscipit libero, non fringilla ligula dictum non. Integer sit amet dapibus lectus, in imperdiet leo. Maecenas mattis porta ullamcorper. Ut non tortor vel ante dignissim auctor vitae quis tortor. Duis vitae enim eu risus viverra interdum vitae eu ligula. Nulla suscipit metus eget feugiat iaculis. Integer ultricies mattis orci, non condimentum velit. Praesent in semper est. Cras quam ante, mollis ac nunc in, eleifend venenatis dui.In urna nibh, bibendum vitae luctus sed, pellentesque lobortis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras at lectus sem. Sed sed maximus turpis, eget pulvinar justo. Phasellus ut luctus sem. Etiam odio massa, condimentum eget sem id, porta sagittis erat. Vivamus pretium at neque ornare egestas. Aenean faucibus bibendum est. Phasellus a est nibh. In pharetra enim sit amet diam ultricies ultrices. Pellentesque bibendum felis sit amet sapien congue, sed sagittis dui porttitor. Pellentesque tempor tempor maximus. Duis eu justo nec odio rutrum malesuada.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc porta vulputate purus nec ornare. Nam diam nisl, mattis ut semper sagittis, porttitor et massa. Sed non lorem id eros vestibulum blandit. Aenean elementum tincidunt accumsan. Phasellus orci nisl, fermentum non ex eu, iaculis dapibus sapien. Etiam efficitur maximus velit, at consectetur tortor congue sed. Nullam eget fringilla dolor. Phasellus in nisl blandit, porta nulla a, feugiat nibh. Quisque in massa facilisis, pretium mauris quis, finibus justo.
Here's how to set up this plugin in your Carrd site:– Download the template
– Copy the code from the EMbed element titled "Top banner"
– Set the Embed element in your Carrd site to Hidden, Body Top
– Update the message and links in the top banner. Look for this HTML:
<div class="promo-banner">
<p class="promo-text">
40% off Black Friday deal is on! Use code
<span class="promo-wrapper">
<span class="promo-code" id="promoCode">BF2025</span>
<span class="copy-msg" id="copyMsg">Copied!</span>
</span>
at checkout.
<a href="#blackfriday">See more →</a>
</p>
</div>
– To change the background color or font color of your banner, look for this code and edit background-color and color:
<style>
.promo-banner {
width: 100%;
background-color: #000;
color: #fff;
...
}
– Hit publish and you're done!