GGB Components — Shared UI Library

The shared building blocks for all GGB websites — every element below is rendered from the current design tokens, so this page doubles as a test bench: change the design in the Brand Lab and everything here follows. Class names (ggb-btn, ggb-card, …) are the naming convention for implementing them in the real apps.

Navigation — desktop

Top bar with logo left, sections center/right, accent CTA last. The active section uses primary color.

Events Leagues Menu Shop Reserve

Navigation — mobile

Below 760 px the links collapse into a hamburger (☰) that opens a right-side drawer: big touch-friendly links in the title font, the CTA pinned at the bottom. Try it — the demo is interactive. The same pattern runs for real in the public preview (use 📱 Mobile view).

Your game.

Trading cards, board games and good company in the heart of Bern.

Rules:

Drawer from the right, max. 300 px wide
Menu links in the title font, one per line
The page CTA repeats at the drawer bottom
Backdrop click, ✕ or a link click closes it
Admin apps: same pattern, sidebar slides from the left

Buttons

Primary for the main action, accent for buy/sign-up moments, ghost/subtle for secondary. One primary action per view.

Form elements

Inputs on a slightly recessed surface, focus ring in primary. Errors turn the border red with a message below — never color alone.

Name

As shown on the player list.

E-mail

Please enter a valid e-mail address.

Format

I accept the house rules Casual Competitive E-mail reminders

Cards, badges & alerts

Friday Night Magic

Fr 18:00 · CHF 10 · 8 seats left

187

Registrations this month

+12% vs. last month

PRIMARY NEW TAG PAID FULL

Badges: status & highlights only, max. two per element.

ℹ️Heads upDoors open 30 minutes before the event starts.

✅Registered!See you on Friday — check your inbox for the confirmation.

⚠️Almost fullOnly 2 seats left for Commander Night.

⛔Payment failedYour card was declined. Please try another method.

Modal & toast

Modals for decisions that block the flow; toasts for confirmations that don't. Both interactive:

Tabs, table & pagination

Event	Date	Seats	Status
Friday Night Magic	Fr 10.07.	24 / 32	LIVE
Commander Night	Fr 10.07.	16 / 16	FULL
Pokémon League	Sa 11.07.	18 / 24	LIVE

Loading & empty states

Spinner for short waits, skeletons where the layout is known, empty states always say what to do next.

🎲

No events yet.

Footer

The home of gaming in Bern.

Visit usGood Games Bern
3011 Bern

HoursTue–Fri 16–23
Sat/Sun 12–23

FollowInstagram
Discord

GGB Components · shared UI library