# Lineup Grid (Moonarc)

Who is on: each person a drawn portrait on a colour block (PortraitArt, seeded from the name), the name and what they do, and on the back of the portrait their session: its title, the day and time, the stage. A pointer resting on a card, or the keyboard focus on its link, turns the portrait over; on a touch screen the session is a line under the name. With layout="feature" the first two people are drawn twice as large. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/lineup-grid` (license key required)
- Tier B · category section · trigger hover
- Readout: `<LineupGrid people={[{ name, role, session: { title, when, where } }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: the focus ring is drawn on the name instead of around the card, and the card turns on hover alone
- Measured cost: 0 B JS (CSS 14.1 kB raw)
- Page: https://moonarc.dev/components/lineup-grid/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `people` | `{ name, role?, session?: { title, when?, where? }, href?, block? }[]` | none | The people, in order. The portrait is drawn from the name; block is the card's colour (the first four in turn when unset); href makes the name the card's link. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `more` | `{ href: string; label: string }` | none | A link beside the heading, e.g. to everyone. |
| `layout` | `'feature' | 'even'` | `'feature'` | feature: the first two people twice as large on a wide box (six or ten people fill its rows); even: one grid. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the section's heading; the names are one below (1 on a page whose own h1 is above the grid). |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the portraits keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import LineupGrid from '@/components/moonarc/pro/LineupGrid.astro';
---
<LineupGrid
  eyebrow="Speakers"
  more={{ href: '/speakers/', label: 'All speakers' }}
  people={[
    { name: 'Type designer', role: 'Foundry name', session: { title: 'Letters that move', when: 'Fri 10:30', where: 'Main stage' }, href: '/schedule/#letters' },
    { name: 'Product lead', role: 'Company name', session: { title: 'Shipping small', when: 'Fri 11:30', where: 'Main stage' } },
  ]}
>
  <span slot="headline">Twenty-four speakers, <em>three stages</em></span>
</LineupGrid>
```

## Reduced motion

The card turns over at once, without the half-second turn.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- Both faces are in the page in reading order, the name and then the session, so a screen reader hears everything without turning anything; the back face is hidden from it as a copy of the line under the name.
- The turn is a 3D rotation of one box holding the two faces with their backs hidden, so it is a CSS transition and costs no script.
- A touch screen has no hover to rest on, so there the session is a line under the name and nothing turns.
- The back face swaps the block's two colours, its text on its ground, so it reads as well as the front.

## Replaces

- Speaker grids (event templates)
- Flip card team sections

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/lineup-grid` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: portrait-art.