Network · departure-board
Departure board
Events as rows on a board, not cards. Each row shows the time, the event and its division, the venue, and whether registration is open.
Board
On the home page it is a tone-ink station screen showing the next four events; the first row is the next departure. Content is illustrative, “today” is fixed at 13 October 2026.
- In 12 days
Pekan Budaya Indonesia
SOSBUDSosial BudayaMEDKREFMedia KreatifDance, music and food from across Indonesia, open to friends from every campus.
SZU深圳大学Main fieldUpcoming
Career talk: internships in Shenzhen
PKAPerkembangan Karir dan AkademikHUMASHubungan MasyarakatHITSZ哈尔滨工业大学（深圳）Building G, room 301Fully bookedBazar Kuliner Nusantara
DANUSDana UsahaCUHK-Shenzhen香港中文大学（深圳）Lower campus plazaRegistration openRegister
Show codeHide code
<DepartureBoard>
<DepartureRow variant="next" event={next} media={<Image … />} linkAs={NextLink} />
{rest.map((event) => <DepartureRow key={event.slug} event={event} linkAs={NextLink} />)}
</DepartureBoard>Timeline
On the events index the board runs on bg with a vertical route along the time column: each row is a station, and “You are here” sits between the last past row and the next upcoming one.
Malam Keakraban 2026
BPHBadan Pengurus HarianSOSBUDSosial BudayaCUHK-Shenzhen香港中文大学（深圳）Main hallMaster's scholarships in China: a seminar
PKAPerkembangan Karir dan AkademikSUSTech南方科技大学Lecture room 1- You are here
Career talk: internships in Shenzhen
PKAPerkembangan Karir dan AkademikHUMASHubungan MasyarakatHITSZ哈尔滨工业大学（深圳）Building G, room 301Fully booked
Show codeHide code
<DepartureBoard>
{past.map((e) => <DepartureRow key={e.slug} event={e} variant="past" timeline />)}
<DepartureNow />
{upcoming.map((e) => <DepartureRow key={e.slug} event={e} timeline media={…} />)}
</DepartureBoard>Variants
Pekan Budaya Indonesia
SOSBUDSosial BudayaMEDKREFMedia KreatifCareer talk: internships in Shenzhen
PKAPerkembangan Karir dan AkademikHUMASHubungan MasyarakatShenzhen Cup 2026
DEPOLDepartemen Olahraga
Show codeHide code
<DepartureRow variant="compact" event={event} />No upcoming events yet.
Follow our Instagram for the latest news.
Show codeHide code
<Empty>…No upcoming events yet.…</Empty>Anatomy
| Column | Content |
|---|---|
| Time | Day in type-numeral, month and weekday in type-sign, the start time below. A <time> with the +08:00 offset. |
| Event | The title in type-heading-lg (a heading wrapping the stretched link), then the line badge(s). |
| Station | The campus station label, bilingual, with the venue in type-caption. |
| Status | A status badge; “Register” for open registration; “View gallery” for past events. |
| Thumbnail | An optional 3:2 image from lg up, alt="". |
Rules
- Hover gives the row a
surface-strongfill and underlines the title; the photo doesn't change. Focus outlines the whole row. - Only the next departure gets the red “Register”; other rows use a secondary button, so a board never shows several red buttons.
- Relative time (“In 12 days”) updates once a day. No ticking countdowns or split-flap animation.
Don’t
A grid of event cards with photos on top and buttons underneath.
Do
Rows on a board: time, event and line, station, status.