status page exampleseight templates, all live
Every example below is a template you can copy, and every strip in it is real data from a real project, refreshed while you read. Take a layout, point it at your own monitors, and skip the week you were going to spend building one.
One element, then it's your page
The widget draws the bars, the percentages and the incident state. These designs decide everything around it: where it sits, what frames it, what it's next to. That's the part every team ends up rebuilding.
<script src="https://feedfa.st/embed.js" data-project="your-project" defer></script>
<div data-feedfast="uptime"></div>It renders inside a shadow root, so your CSS can't reach into it and its styling can't leak onto your page. Colour and light or dark come from data-accent and data-theme rather than a stylesheet fight; the docs list every attribute.
What every good status page shows
Look at the status pages people trust and the same seven things come up. The designs below cover the layout; a FeedFast status page covers the rest, from incident updates to email subscribers.
- 01
The answer, before anything else
Someone opening a status page has one question: is it me or is it you? One line at the top answers it. Example: Hero banner.
- 02
Each part of the product on its own
An API outage shouldn't paint the marketing site red. One row per service tells people whether the part they use is affected. Example: Service grid.
- 03
History, not only right now
Ninety days of bars shows whether today is a blip or a pattern. A single green dot shows nothing. Example: The whole page.
- 04
Incidents in plain words, as they happen
What broke, when it started, what you're doing and when it ended. Short updates while it's live beat one long apology after.
- 05
Maintenance announced in advance
A planned window posted days ahead is a non-event. The same downtime unannounced is an incident.
- 06
A way to be told
Email updates for the people who'd otherwise refresh the page, or your inbox, every five minutes.
- 07
A link where people already look
In the footer, the docs and the app's help menu. A status page nobody can find doesn't take a single question off your inbox. Example: Footer bar.
Incidents, scheduled maintenance and subscriber emails are part of uptime monitoring, on the free plan too.
Whole pages
The whole page
A status page of your own, on your own domain, in about twenty lines.
Acme status
Live availability for every part of the product.
Dark console
For an internal dashboard or an ops screen that lives on a wall.
System status
Rolling 90 days, refreshed every minute.
In a layout
Service grid
One card per service, when each has its own owner or its own audience.
Marketing site
Public pages and sign-up
API
Everything your integrations call
Status and what's new
The two things people check on a quiet Monday, side by side.
Status
What's new
Small
One service, compact
For a pricing page or a docs header, where only one thing matters.
API availability
A status page is one monitor away
The free plan includes a monitor, a public status page and email alerts. Point one of these layouts at it and you're done.