Network · service-notice

Service notice

A station's posted announcement, for a change to something people planned around: pickup moved, a campaign closed early, an event canceled.

Service notice

An ink header names the kind and the lines affected; the body says what happened in the title and what to do in the text, with one action at most. Place it at the top of the page it affects, above everything but the header.

Preview

Service changeUpdated Tue, Mar 16 · 09:30

Pickup moves to the north gate

Rain is forecast on Wednesday, so pickup is under the north gate canopy instead of the field. Times stay the same.

Show code

<ServiceNotice
  kind="change"
  lines={["danus"]}
  updatedAt={notice.updatedAt}
  title="Pickup moves to the north gate"
  action={<Button>See pickup times</Button>}
>
  <p>Rain is forecast on Wednesday, so pickup is under the north gate canopy instead of the field. Times stay the same.</p>
</ServiceNotice>

Kinds

Preview

Service notice

Doors open at 18:30, not 18:00

The hall is still being set up. Your ticket works as before.

Service canceled

Futsal Cup is canceled

The field is closed for repairs. Everyone who registered gets an email; nothing to do.

Service has ended

GumamChan at SZ Cup has ended

Thanks for ordering. Your orders and their QR codes still work below.

Kind	Header	Use for
notice	Service notice	Something to know that changes nothing you do.
change	Service change	Something you planned around moved: place, time, payment.
suspended	Service canceled	It won't happen: an event or campaign canceled.
ended	Service has ended	It finished as planned: a campaign ended, a form closed.

Voice

Metro words for states, plain words for what to do. The metaphor names the situation; the sentence after it always says the real thing.

Situation	Title	Then
Not found (404)	This station isn't on the network	Check the address, or go to the main page.
No orders yet	No departures yet	Orders you place show here.
Campaign ended	Service has ended	Your orders still work.
Disabled account	This card can't pass the gate	Message PPITSZ on Instagram to have it checked.
Nothing open	No departures scheduled	The next ones are announced on the PPITSZ socials.
Error (500)	Service disruption: Something went wrong	Try again in a moment. The error code is for IT.
Scanner offline	No service: This phone is offline	Use the printed list until it reconnects.
Lost the email	Lost property	Find it by email.
Closes within a day	Final call	Beside the real status badge, never instead of it.

Short labels read like signs: a noun or a verb first, no “please”, no exclamation marks. “Have your QR code ready”, “Pickup this way”, “Last order 20:00”. Sentences after them stay in the casual “you”.

Page not found

A 404 isn't a notice: nothing changed, the address is wrong. Every app shows the same PageNotFound under its own header; only the sentence differs. Say why the link may be wrong here, then link to where to go instead.

Preview

Page not found

This station isn't on the network

An order link may have been cut off when copied. Open it again from the original message, or check Your orders.

Show code

<PageNotFound>
  An order link may have been cut off when copied. Open it again from the original message, or check{" "}
  <Link as={NextLink} href="/orders">Your orders</Link>.
</PageNotFound>

Rules

Alert is feedback on the screen's own task (“Payment proof uploaded”). A service notice is the service itself changing.
One notice per page, the newest. Remove it once it stops being true.
Static: no live role, no dismiss button. It is the page's state.
label replaces the header words in two places only: “Service disruption” on error pages (kind change, heading h1), and “No service” while a scanner is offline (NoService, kind suspended, shown only while the phone has no network).

Don’t

A red banner reading “IMPORTANT!!” with the details in a linked PDF.

A service change with the new place in the title and the unchanged times in the text.