Network · ticket

Ticket

A metro ticket for an event ticket or an order to collect: an ink body on the organizing division's line, and a light stub that tears off along a perforation, with the QR.

Ticket

A Forms ticket (ADR 0003): what it is for, whose it is, then the cells people look for at the door.

Preview

Regular

Malam Budaya 2026

Name: Titan Aldebaran
Date: Sat, Nov 14
Doors: 18:30
Station: SZU · Main hall

If the QR code won't scan, say this codeK7P3QX

Show code

<Ticket aria-labelledby="ticket-name">
  <TicketBody line="sosbud">
    <TicketHeader>
      <LineBadges codes={["sosbud"]} />
      <span className="type-sign text-muted">Regular</span>
    </TicketHeader>
    <TicketTitle id="ticket-name" lang="id">Malam Budaya 2026</TicketTitle>
    <TicketFields>
      <TicketField label="Name">Titan Aldebaran</TicketField>
      <TicketField label="Date">Sat, Nov 14</TicketField>
      <TicketField label="Doors">18:30</TicketField>
      <TicketField label="Station">SZU · Main hall</TicketField>
    </TicketFields>
  </TicketBody>
  <TicketStub>
    <TicketQr url={url} />
    <TicketCode>K7P3QX</TicketCode>
  </TicketStub>
</Ticket>

Order to collect

A Shop pickup order is a ticket too: the order code is the ticket number, and the booth scans the stub.

Preview

Paid

GumamChan at SZ Cup

Order: GC-7K3P
Items: 3
Pick up: Wed, Mar 17
Station: Booth Danus

Show this at the boothGC-7K3P

Not valid

A canceled ticket keeps its body, so people can see which one it was, and says why in the stub instead of showing a QR.

Preview

Canceled

Malam Budaya 2026

This event was canceled, so this ticket isn't valid.

Anatomy

Part	Spec
Body	tone-ink, the line's route across the top. Set `line` on `TicketBody`, inside the ink, so the line takes its dark value.
Fields	A `<dl>`: kicker labels, type-sign values. Two across, four from a 448px column.
Perforation	A 2px dashed rule with a 12px notch at each end, cut with a mask.
Stub	Always light (`scope-light`), so the QR is black on white for scanners in dark mode. Under the QR, the code to read out.

Rules

The notches are the only cut corners in the system, and only tickets have them.
One ticket per screen, at full column width up to 36rem.
dispense only when the ticket is new this moment: Forms right after sign-up, Shop in the minutes after the payment is checked. See Motion.
No barcodes, holograms or fake serial numbers: every field is real data.

Don’t

A ticket with a gradient, a glossy shine or a drop shadow.

Flat ink and paper, the line on top, and the perforation.