Widget Demos

UI Components

Marketing

Content Display

Navigation

Notifications

Visual Effects

Interactive

Layout

Interactive

Countdown Widget

JavaScript countdown timer to a target date/time. Supports multiple layouts (default, compact, card, minimal), custom labels, timezone handling, and completion callbacks.

Default Layout

Standard countdown with all time units.

Code

<?php echo CountdownWidget::widget([
    'targetDate' => '2025-12-31 23:59:59',
    'title' => 'Event Starts In',
]); ?>

Live Demo

Card Layout

Bootstrap card style countdown.

Code

<?php echo CountdownWidget::widget([
    'targetDate' => $saleEndDate,
    'layout' => 'card',
    'title' => 'Sale Ends In',
]); ?>

Live Demo

Compact Format

Inline compact countdown (00:00:00:00).

Code

<?php echo CountdownWidget::widget([
    'targetDate' => $deadline,
    'layout' => 'compact',
]); ?>

Live Demo

Minimal Layout

Inline minimal format (00d 00h 00m 00s).

Code

<?php echo CountdownWidget::widget([
    'targetDate' => $eventDate,
    'layout' => 'minimal',
]); ?>

Live Demo

Without Seconds

Countdown showing only days, hours, and minutes.

Code

<?php echo CountdownWidget::widget([
    'targetDate' => $launchDate,
    'showSeconds' => false,
]); ?>

Live Demo

With Expired Message

Shows custom message when countdown reaches zero.

Code

<?php echo CountdownWidget::widget([
    'targetDate' => $deadline,
    'expiredMessage' => 'Event has started!',
]); ?>

Live Demo

Configuration Options

Option	Type	Default	Description
`targetDate`	string\|DateTime	`required`	Target date/time
`timezone`	string	`app timezone`	Timezone for target date
`layout`	string	`default`	Layout: default, compact, card, minimal
`title`	string	`null`	Title above countdown
`showLabels`	bool	`true`	Show labels (Days, Hours, etc.)
`showDays`	bool	`true`	Show days counter
`showHours`	bool	`true`	Show hours counter
`showMinutes`	bool	`true`	Show minutes counter
`showSeconds`	bool	`true`	Show seconds counter
`expiredMessage`	string	`null`	Message when countdown expires
`hideOnExpired`	bool	`false`	Hide widget when expired

Share Buttons Widget

Widget Demos

Countdown Widget

Default Layout

Code

Live Demo

Event Starts In

Card Layout

Code

Live Demo

Sale Ends In

Compact Format

Code

Live Demo

Minimal Layout

Code

Live Demo

Without Seconds

Code

Live Demo

Launch Date

With Expired Message

Code

Live Demo

Registration Closes In

Configuration Options