Network · station-nameplate

Station nameplate

A page's title as the name sign on a platform wall: the line on top, the name, and along the bottom the stations either side. For the pages of a flow, so people always see where they are and what comes next.

Nameplate

The previous station is usually a link back. The next one is usually words only, because the page's own primary button goes there.

Preview

Danus PPIT Shenzhen

GumamChan at SZ Cup

Show code

<StationNameplate
  kicker="Danus PPIT Shenzhen"
  name="GumamChan at SZ Cup"
  line="danus"
  lines={["danus"]}
  linkAs={NextLink}
  previous={{ label: "All campaigns", href: "/" }}
  next={{ label: "Checkout" }}
/>

In a flow

Children sit inside the band: on checkout and an order's page, the order code and the strip map, so one sign says where you are and what comes next.

Preview

GumamChan at SZ Cup

Finish your payment

OrderGC-7K3P

NextVerifyTowardsPick up

Order
PayBefore 21:00
Verify
Pick up

Show code

<StationNameplate kicker={campaign.name} name="Finish your payment" line="danus" previous={…}>
  <StationCode code={order.code} line="danus" />
  <StripMap line="danus" stops={stops} current={1} />
</StationNameplate>

Anatomy

Part	Spec
Band	tone-ink, rounded-xl, the line's route across the top.
Name	The page's `h1` in type-display-xl, with the kicker and line badges above.
Either side	Previous and Next, kicker over type-sign, with bold arrows. A link when it has href.

Rules

Only on the pages of a flow (a campaign, its checkout, an order). Dashboards and settings keep a plain heading.
One nameplate per page, at the top. Nothing above it but the site header and a service notice.

Don’t

A breadcrumb trail of five links above a plain title.

The nameplate: where you are, the station before, the station next.