Gallery

Design a trial status bar for a SaaS app that sits near the top of the interface and stays visible without taking over the page. It should communicate three things fast: how many days are left, how far along the trial is, and what the user should do next.

In the collapsed state, show the remaining days as the main value, a compact progress indicator, and one primary action such as Upgrade, Extend trial, or See plans. Keep the bar small enough to coexist with the rest of the UI, but clear enough that users do not miss it.

When expanded on hover or tap, reveal trial details like the end date, what features are still available, and a secondary action for learning more. The expanded state should feel like a helpful status panel, not a sales banner.

Design an urgent variant for the last few days of the trial. The hierarchy should shift toward the deadline, but the bar still needs to feel calm, readable, and easy to dismiss or act on.