Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Loyalty Stamp Card — Free Website Section Template
Call to action · v1.0.0 · Updated 2026-11-15 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
Ask an AI assistant to connect the card to real data: load a customer’s stamp count from your own API, add a QR code the staff scan to add a stamp, or send an email when the card is full.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a loyalty stamp card section in HTML, CSS and JavaScript.
- Two columns: on the left a heading, a short paragraph and three "how it works" steps with icons; on the right a brown gradient card titled "Daily Grind Rewards" with a grid of 8 round stamps (4 per row).
- Empty stamps are dashed circles with a number; collected stamps are solid white circles with a coffee cup; the last stamp is gold and says FREE.
- A progress line "3 of 8 stamps collected" (aria-live polite) and a button "Add a stamp". Each press fills the next stamp with a short pop animation (skip it when prefers-reduced-motion is set).
- When all stamps are full show "Card complete! Show it at the counter for your free drink.", disable the add button and show a "Start a new card" button.
- Save the count in localStorage inside try/catch. Stack into one column on narrow screens.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
About this section
Loyalty Stamp Card — Free Rewards Card Section
Loyalty Stamp Card is a "collect eight stamps, get one free" card that visitors can actually play with. A grid of round stamps fills one by one as they press the button, a progress line says how many are left, and the last stamp turns into the reward. Beside it sit a heading, a short explanation and three "how it works" steps, so the scheme is understood in a few seconds.
A card that remembers
The card keeps its progress in the visitor's own browser, so the stamps are still there on the next visit. Nothing is sent to a server and there is no sign-up. If the browser blocks storage, for example in a private window, the card simply starts again from the number you chose. When every stamp is filled the message changes, the button is disabled and a "Start a new card" button appears.
Make it yours
Choose 6, 8, 10 or 12 stamps, set how many are already collected on a new visitor's card, and pick the symbol: a coffee cup, a scissors emoji, a letter. The last stamp carries its own label such as FREE. Every message uses plain text fields, including the progress line, where {n} and {t} are replaced by the numbers, so the card works in any language.
Demo or display
Keep the "Add a stamp" button on for a website where visitors try the card, or turn the demo buttons off to show a fixed card that only illustrates your scheme. The stamps are real list items with screen reader labels, the progress message is announced politely, and the pop animation is skipped for visitors who prefer reduced motion.
Export it
Download HTML, a ZIP, React or Vue, or fork into My Code. It sits well after a menu or product grid and before a newsletter sign-up, and it is used in the Cafe & Coffee Shop website template.
Getting the most from it
Keep the goal reachable: eight stamps for a free drink is easier to finish than twenty. Say what counts as a stamp, put the card near the menu, and train staff to mention it when someone orders. A real stamp card at the counter or a loyalty tool should back the page up, because this section is a demonstration and not a customer account system.
Why use it
Why Use the Loyalty Stamp Card
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, the card, messages, how it works and button in the panel. Switch the how it works on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
In real websites
Website Templates That Use the Loyalty Stamp Card Section
The Loyalty Stamp Card section is part of 1 complete website template in the free Website Builder, so you can see it in a full page before you use it on its own: Cafe & Coffee Shop Website (Order Online). Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
No. It is a front-end demonstration that remembers progress in the visitor’s own browser. Use it to explain your scheme, and back it with real stamp cards or a loyalty tool in your shop.
In the browser’s local storage, per card name and stamp count. Clearing site data or using a private window starts the card again from the starting number you set.
Yes. Pick 6, 8, 10 or 12 stamps, change the stamp symbol, the label on the last stamp, the reward line and every message, including the progress text.
Yes. Turn off the demo buttons and the card becomes a fixed illustration showing the number of collected stamps you set, which suits a simple explanation.
It saves an editable copy of your Loyalty Stamp Card in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.