FairGarden Design

Marquee

A thin, loud scene divider of brand phrases or short social proof, once per page. It is static only: it never scrolls, clips or animates, so it has no motion control and renders the same under every motion preference.

import { Marquee } from '@fairgarden-private/design/components/Marquee'

Place it full width in its band; it sets its own content container. phrases are set once in type-marquee caps, separated by solid dots, at least 48 px tall and never clipped: up to two lines at base, one from 768 px. Never put facts a reader needs in it.

Field, page ground and ticker

Field, page ground and ticker

By default the phrases sit in a full-container forest field, with its radius and its one-ink edge; field also takes leaf or amber within their rations, and fielded={false} runs the phrases on the page ground. A field keeps at least a gutter of page ground from any other field and never touches the night footer. drawing hangs an illustration from the field's bottom edge, a quarter of it tucked under the field (312 px, 152 px below 768 px). kind="ticker" carries serif sentences on the page ground between two full-bleed rules.

Grown Here Picked This Morning Never Frozen

Page content continues below the hanging drawing.

Grown Here Picked This Morning Never Frozen

“The best tomatoes in the valley.” “Worth the drive.”

MarqueeGrounds.tsx
import { Marquee } from '@fairgarden-private/design/components/Marquee'
import styles from './grounds.module.css'

/** A hanging sprout drawn in currentColor (the --primary12 line) with --role-halo fills. */
function Sprout() {
  return (
    <svg viewBox="0 0 120 160" aria-hidden="true" focusable="false" className={styles.drawing}>
      <path d="M60 158V70" />
      <path d="M60 96c-22 0-38-14-40-36 22 0 38 14 40 36Z" />
      <path d="M60 80c20 0 36-14 38-34-20 0-36 14-38 34Z" />
      <circle cx="60" cy="40" r="22" />
    </svg>
  )
}

const phrases = ['Grown Here', 'Picked This Morning', 'Never Frozen']

/** The default forest field with a hanging drawing, the page-ground run and the quote ticker. */
export function MarqueeGrounds() {
  return (
    <div className={styles.stack}>
      <Marquee label="What we stand for" phrases={phrases} drawing={<Sprout />} />
      <p className={styles.note}>Page content continues below the hanging drawing.</p>
      <Marquee label="What we stand for, on the page ground" phrases={phrases} fielded={false} />
      <Marquee
        kind="ticker"
        label="What visitors say"
        phrases={['“The best tomatoes in the valley.”', '“Worth the drive.”']}
      />
    </div>
  )
}

In print

The phrases print once, centered, in black between two 1.5 pt rules; the field's fill and frame drop. A hanging drawing prints whole, in the flow.

API Reference

The marquee band. It never scrolls, clips or animates [D169]: every phrase shows whole. In print the phrases print once, centered, between two 1.5 pt rules, and the field’s fill drops.

PropTypeDescription
label
string

The section’s accessible name, e.g. “What we stand for”.

drawing
React.ReactNode | undefined

An optional hanging drawing (an aria-hidden SVG at --ds-size-art-l, --ds-size-art-s below --md-n-above): --primary12 lines (currentColor) and --role-halo fills. It tucks under the field’s bottom edge and hangs into the page ground below.

field
MarqueeField | undefined

The field preset. Default forest.

fielded
boolean | false | undefined

The phrases sit in a full-container field (default true); false runs them on the page ground [D180].

kind
'static' | 'ticker' | undefined

static (default): the phrases set once, centered, in a field or on the page ground. ticker: serif sentences on the page ground between two full-bleed rules.

phrases
string[]

The phrases, each shown whole, separated by dots. Short brand phrases or social proof, never facts a reader needs; ≤ 2 lines at base.

primary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| null
| undefined

Primary Radix scale: the phrases, dots and rules. Never defaulted; omitted, it inherits the scope or the field’s defaults [D133].

secondary
| 'ruby'
| 'amber'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| 'blue'
| 'cyan'
| 'grass'
| 'green'
| 'jade'
| 'lime'
| 'mint'
| 'orange'
| 'sky'
| 'teal'
| 'yellow'
| null
| undefined

Secondary Radix scale: accepted for the shared contract; unused. Never defaulted.

marquee
MarqueeField

The fields a marquee may sit in [D180]: forest (default), leaf or amber, within their rations.

type MarqueeField = 'forest' | 'leaf' | 'amber'
MarqueeProps

Props for Marquee: section props, the label, phrases, kind, field and drawing, and the color axes.

type MarqueeProps = MarqueeStaticProps | MarqueeTickerProps

Specification: DESIGN-SYSTEM.md §11.12 (marquee band; static only per D169, a field or the page ground per D180).