Ticket Stub

The foot of an event's site, made like its ticket: a colour block with the name large (a second part in the emphasis), the dates and the place, the link columns and a few small lines; a perforated line, and past it the stub, with "Admit one", the dates again and a barcode drawn from the name. On a wide screen the stub stands at the right end, on a phone at the foot. Zero JavaScript.

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

columnsunset

Measured

JavaScript of its own

0 B

CSS 10.5 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 · widely available

every browser.

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/ticket-stub

src/pages/index.astro

---
import TicketStub from '@/components/moonarc/pro/TicketStub.astro';
---
<TicketStub
  name="Sitename"
  nameEm="Conference"
  dates="14–16 May 2027"
  place="Your city"
  columns={[{ title: 'The event', links: [{ href: '/speakers/', label: 'Speakers' }, { href: '/tickets/', label: 'Tickets' }] }]}
  lines={['Three days, one hall']}
/>

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

Props

Prop	Type	Default	Description
`name`	`string`	none	The name, set large in the display face.
`nameEm`	`string`	none	A second part of the name, set in the emphasis after a space.
`dates`	`string`	none	The dates, under the name and again on the stub.
`place`	`string`	none	The place, beside the dates.
`columns`	`{ title: string; links: { href: string; label: string }[] }[]`	none	The link columns, each a nav named by its title.
`lines`	`string[]`	none	Small lines at the foot, in the mono face.
`admit`	`string`	`'Admit one'`	The stub's word.
`block`	`1 \| 2 \| 3 \| 4 \| 5`	`5`	The colour block the ticket paints.

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-stub.ma-stub__admit.ma-stub__code.ma-stub__column.ma-stub__columns.ma-stub__lines.ma-stub__main.ma-stub__name.ma-stub__stub.ma-stub__stub-date.ma-stub__ticket.ma-stub__title.ma-stub__when

Slots

none

Reduced motion

The links' underline appears without its sweep.

With `ClientRouter`

CSS only; nothing to rebind.

Why it is built this way

The barcode's bars are drawn from a hash of the name and the dates, so a ticket keeps its code between builds.
The stub tears along a dashed line with a notch at each end in the page's own colour, across the bottom on a phone and down the side on a wide screen.
The stub repeats what the main part says, so it is hidden from assistive technology.

Replaces: Footers (event templates). See the migration table.

Footer

Pro

A site footer: brand and blurb, link columns revealed with a stagger, a legal row, and a dot field fading up from the bottom edge.

every browserscroll

Footer Big Type

Pro

A footer for a studio or a person: a line and the email address to write to, columns of links, and the name set across the whole width at the bottom.

every browserscroll

Footer Label

Pro

The foot of a maker's site, made like the label sewn into what they make: a panel in a colour block with a stitched edge, the name large (a second part in the emphasis face), the link columns, a row of care symbols drawn as line icons with their words (how to wash it, that it goes in the oven, that it is mended for free) and a few small lines in the mono face.

every browserhover

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

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