Free Embed Widget

Free Cards
Countdown Timer Widget

Each time unit gets its own card. Bold, structured, and highly legible — the Cards style works perfectly for product launches and retail promotions.

Widget Builder

Configure & Embed

Customise your Cards countdown then copy the embed code.

Widget Settings

Show Units
Colour Theme

About This Style

About the Cards Style

The Cards countdown timer elevates the humble digit display into something genuinely eye-catching. Rather than running all units together in a single line, each time unit — days, hours, minutes, seconds — is given its own dedicated card block. This visual separation creates a clear, structured layout that is immediately understood at a glance, even from a distance on a large monitor or conference room screen.

The card-per-unit design shines in high-stakes commercial contexts. It is the go-to style for Black Friday countdown banners, Kickstarter campaign pages, conference registration deadlines, and limited-edition product launches. The boxed layout signals importance — it says "this date matters" in a way that a simple colon-separated timer cannot. Retailers and event organisers consistently find that the Cards style draws more attention to the countdown than any other format.

Each card's background is independently controllable through the Tertiary colour in the colour picker. This lets you create dramatic contrast — deep charcoal cards with bright amber digits, white cards with navy text, or on-brand colour combinations that tie the widget directly into your visual identity. The card border colour can also be customised, allowing for subtle or bold framing depending on your preference.

The Cards layout adapts gracefully to different unit counts. Show all four units for a full breakdown, or trim to just hours and minutes for a short-duration countdown that demands urgency. On mobile screens the cards reflow cleanly so the layout never overflows or squashes the digits.

Whether you are building a WooCommerce product page, a Shopify landing page, or a standalone HTML event site, the Cards countdown is a proven conversion tool that combines clarity, visual impact, and total configuration flexibility in a single, free-to-embed widget.

Integration

How to Embed the Cards Countdown

  1. Use the configurator above to set your target date, timezone, title, and colour theme.
  2. Click the Copy Code button to copy your personalised embed snippet.
  3. Open your website's page editor and locate the HTML or code block area.
  4. Paste the snippet directly into your page HTML where you want the countdown to appear.
  5. Save and publish your page — the widget will load automatically for every visitor.

Your embed code will look like this:

<div data-wf-widget="countdown-cards"
     data-wf-target="2026-12-25T00:00:00Z"
     data-wf-title="Christmas Countdown"
     data-wf-size="inline"></div>
<script src="https://widget-forge.com/embed.js" async></script>

Platforms

Platform Guides

WordPress

Add a Custom HTML block in the block editor and paste your embed code. The Cards widget is especially effective in WooCommerce product pages — add it above the Add to Cart button for maximum conversion impact.

Squarespace

Use a Code block set to HTML mode. The Cards style's fixed card heights make it ideal for Squarespace's section-based layouts. Place it in a full-width section for a striking promotional banner effect.

Wix

Add an HTML iFrame element from the Embed panel. Resize it to approximately 150px tall. The Cards layout is striking as a centred block on Wix store promotion pages and event landing pages.

Webflow

Drop an Embed component into your layout and paste your code. In Webflow the Cards countdown pairs well with CMS-driven product or event pages where the card aesthetic echoes a data-card UI pattern.

Plain HTML / CSS Sites

Paste the embed code into your HTML file at the desired position. No external libraries needed. The Cards widget is self-contained and loads its own styles inside the iframe, so it will not conflict with your page's CSS.

Support

Frequently Asked Questions

Can I customise the card background colour?

Yes. The Tertiary colour in the colour scheme picker controls the background fill of each individual card. Set it to any hex colour to match your brand — a deep navy, a rich burgundy, or a vibrant teal all work beautifully with the Cards layout.

How many units can I show?

You can show between one and four units: days, hours, minutes, and seconds. Use the unit checkboxes in the configurator to enable or disable each one. Showing two or three units makes each card larger and more visually impactful on smaller screens.

Does it work on Squarespace?

Yes. In Squarespace add a Code block to any page section, paste your embed code in HTML mode, and save. The widget renders correctly within Squarespace's fluid grid layouts on both desktop and mobile breakpoints.

Can I embed multiple countdown widgets on the same page?

Yes, each embed code is completely independent. You can place multiple countdown widgets on the same page — for example, one counting to a sale start and another to a sale end. Each widget loads in its own iframe and does not interfere with others.

What happens when time runs out?

When the countdown reaches zero the cards are replaced by the expiry message you configured. If you did not set an expiry message the widget will display all zeros and then stop updating. The expired state persists until a visitor reloads the page.