Skip to content

Components / Sections

Venue Guide

Where it is and how to get round it: a drawn site map in a colour block with the places on it as numbered dots in their own colours (the stages, the food, the entrance), and beside it the same places as a numbered list with a line each; pointing at a place in the list lights its dot on the map. Under them, how to get there by train, bus, bike, car or on foot, each with its icon, and the address with a link to a map. Zero JavaScript.

Live demo

Venue

An engine hall by the river

  1. Main stageTalks, in the old engine hall
  2. Hall BWorkshops, up the stairs
  3. GardenLunch and the party
  4. EntranceBadges and the cloakroom
  • By trainTen minutes on foot from the central station.
  • By bikeRacks by the entrance, free all three days.
Your street 12Your city
Directions

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Variants · each row writes the attribute the prop writes; the section's own CSS answers

tone
density

Measured

JavaScript of its own

0 B

CSS 12.9 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · newly available

Chrome 105 · Firefox 121 · Safari 15.4; needs has. Elsewhere: the dots do not light from the list; the list and the map read the same.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal
npx shadcn@latest add @moonarc-pro/venue-guide
src/pages/index.astro
---
import VenueGuide from '@/components/moonarc/pro/VenueGuide.astro';
---
<VenueGuide
  eyebrow="Venue"
  places={[
    { name: 'Main stage', note: 'Talks, in the old engine hall', x: 32, y: 42 },
    { name: 'Hall B', note: 'Workshops, up the stairs', x: 64, y: 32 },
    { name: 'Entrance', note: 'Badges and the cloakroom', x: 44, y: 76 },
  ]}
  travel={[{ mode: 'train', title: 'By train', text: 'Ten minutes on foot from the station.' }]}
  address={['Your street 12', 'Your city']}
  directions={{ href: 'https://www.openstreetmap.org/', label: 'Directions' }}
>
  <span slot="headline">An engine hall <em>by the river</em></span>
</VenueGuide>

Without a key the registry answers 401 with an upgrade message.

Props

PropTypeDefaultDescription
places{ name, note?, x, y, block? }[]noneUp to nine places; x and y place the dot in percent of the map's width and height.
travel{ mode: 'train' | 'bus' | 'bike' | 'car' | 'walk' | 'plane'; title; text }[]noneHow to get there, each with its icon.
addressstring[]noneThe address, one line an entry.
directions{ href: string; label: string }noneA link to a map.
eyebrowstringnoneA short line above the heading.
headlinestringnoneThe heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour.
copystringnoneA line under the heading.
placesLabelstring'On the site'Accessible name of the list of places.
travelLabelstring'Getting there'Accessible name of the ways to get there.
block1 | 2 | 3 | 4 | 54The colour block the map paints.
level2 | 32Heading level.
tone'surface' | 'muted' | 'ink' | 'brand'unset (paints nothing)The section's ground; the map keeps its block on every tone.
density'compact' | 'cozy' | 'roomy''cozy'Block padding ×0.8 / ×1 / ×1.25 through --ma-density.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-venue.ma-venue__address.ma-venue__body.ma-venue__copy.ma-venue__directions.ma-venue__dot.ma-venue__eyebrow.ma-venue__foot.ma-venue__green.ma-venue__head.ma-venue__headline.ma-venue__map.ma-venue__num.ma-venue__paths.ma-venue__place.ma-venue__place-name.ma-venue__place-note.ma-venue__place-text.ma-venue__places.ma-venue__travel.ma-venue__travel-body.ma-venue__travel-text.ma-venue__travel-title.ma-venue__water

Slots

slot="eyebrow"slot="headline"

Reduced motion

A dot lights at once, without growing into its ring.

With ClientRouter

CSS only; nothing to rebind.

Why it is built this way

Replaces: Embedded maps for event venues · Venue info sections. See the migration table.

Dotted Map

Backgrounds

A world map drawn as a grid of dots, with markers that pulse.

every browseralways

Hero Poster

Pro

The first screen of an event, made like its poster: one colour block with the edition and the place in the mono face, the name huge, the dates, a line, two actions, three facts, a countdown to the doors (core CountdownFlip) and the days as chips, and beside them a composition of nine shapes in the block's drawing colours that pop into place one after another as the page opens and turn a quarter when a pointer rests on them, one of them turning round a quarter at a time once they are in, inside five seconds, then resting.

every browserloadhover

Ticket Tiers

Pro

The tickets, as tickets: each tier a card with a perforated line under its head (a notch cut from each side), the name and the price, what it includes, how many are left (a count, and a bar that fills as the card comes into view) and its action.

Chrome 120 · not Firefox · Safari 26scrollhover

Visit Card

Pro

Where to find a studio, a shop or a counter, as one card in a colour block: a drawn map with a pin, the address with a directions link, the opening hours for the week, the ways to get in touch, and above them a live line that says whether it is open now and until when (or when it opens next), with the time where the place is.

every browserload

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown