Live Status Badge

About this Component

Three modular badges, one component Mix and match Location, Time, and Status badges. Reorder them freely, display them horizontally or vertically, and show only the ones you need.

Live weather & location

Set a city name or drop in GPS coordinates. The badge fetches real-time weather and displays temperature in °C or °F with an auto-matched icon. Refreshes on a configurable interval (default: every 15 minutes).

Real-time clock

Displays the current time with optional seconds and GMT offset — always ticking, always accurate.

Schedule-based availability

Define your working hours and active days of the week. The component automatically switches the status badge between Available and Unavailable based on your schedule — no manual toggling required.

Animated LED indicator

A customizable blinking dot signals your status at a glance. Control its color, shape (circle or square), size, position, blink speed, fade duration, and minimum opacity — for both available and unavailable states.

Full style control

Adjust padding, border radius, background color, backdrop blur, border stroke, and box shadow directly from the properties panel.

Typography

Set a custom font, size, letter spacing, line height, and separate text colors for available and unavailable states.

Use Cases

Perfect for freelancers, designers, and agencies who want their site to feel alive. Add it to a portfolio to show availability for new work, to a team page to display each member’s location and timezone, or to a personal landing page for a dynamic, real-time touch. Ideal for remote workers and studios that want to communicate working hours without ever updating a banner manually.

Refund Policy

All sales of digital products are final and non-refundable. If you have any questions about the product, please contact me at info@carontefrancesco.it before completing your purchase. I’m happy to help.