# Ticket Stub (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/ticket-stub` (license key required)
- Tier B · category section · trigger hover
- Readout: `<TicketStub name="Sitename" nameEm="Conference" dates place />`
- Browser support: widely (every browser)
- Measured cost: 0 B JS (CSS 10.5 kB raw)
- Page: https://moonarc.dev/components/ticket-stub/

## 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. |

## Usage

```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']}
/>
```

## Reduced motion

The links' underline appears without its sweep.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- 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)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/ticket-stub` with a key in components.json (https://moonarc.dev/account/).