Description List: React Description List component

Semantic key value list for order details, invoices, specifications or account profiles. Default spaces rows on a gap and divided rules a line between them, and long values wrap under their term.

pnpm dlx shadcn add @01orbital/description-list

File

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"

const ROWS = [
  { term: "Order", value: "ORB-10482" },
  { term: "Placed", value: "November 6, 2026" },
  { term: "Ships to", value: "Megan McArthur, Pasadena" },
  { term: "Total", value: "$184.00" },
] as const

/** A divided Description List: four label and value rows. */
export default function DescriptionListDemo() {
  return (
    <DescriptionList variant="divided" className="w-full max-w-sm">
      {ROWS.map((row) => (
        <DescriptionListItem key={row.term}>
          <DescriptionListTerm>{row.term}</DescriptionListTerm>
          <DescriptionListDetails>{row.value}</DescriptionListDetails>
        </DescriptionListItem>
      ))}
    </DescriptionList>
  )
}

Usage

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"

const ROWS = [
  { term: "Order", value: "ORB-10482" },
  { term: "Placed", value: "November 6, 2026" },
  { term: "Ships to", value: "Megan McArthur, Pasadena" },
  { term: "Total", value: "$184.00" },
] as const

/** A divided Description List: four label and value rows. */
export default function DescriptionListDemo() {
  return (
    <DescriptionList variant="divided" className="w-full max-w-sm">
      {ROWS.map((row) => (
        <DescriptionListItem key={row.term}>
          <DescriptionListTerm>{row.term}</DescriptionListTerm>
          <DescriptionListDetails>{row.value}</DescriptionListDetails>
        </DescriptionListItem>
      ))}
    </DescriptionList>
  )
}

Clinic Appointment

Example of the Description List: divided appointment details for a physiotherapy clinic, with a preparation note below. The description list shows label and value rows such as order or appointment details.

pnpm dlx shadcn add @01orbital/description-list-clinic-appointment

npx shadcn add @01orbital/description-list-clinic-appointment

yarn shadcn add @01orbital/description-list-clinic-appointment

bunx --bun shadcn add @01orbital/description-list-clinic-appointment

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Text } from "@/components/text/text"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Juniper Physiotherapy",
  title: "Your next appointment",
  booking: "Booking JP-2049 · Confirmed",
  visit: "Visit",
  visitDetail: "Initial assessment · 50 min",
  clinician: "Clinician",
  clinicianDetail: "Dr. Lena Ortiz, DPT",
  dateTerm: "Date",
  date: "Thu, Nov 12 · 9:30am",
  locationTerm: "Location",
  location: "24 Birch St, Suite 2",
  dueTerm: "Due at visit",
  summary: "Before you arrive",
  prepare:
    "Bring your referral, if you have one, and shorts or clothing that lets you move comfortably. The entrance and treatment rooms are step-free.",
  reschedule:
    "To change your time, call 303-555-0186 at least 24 hours before the visit.",
  due: "$145",
} as const

/** A divided DescriptionList of appointment details for a physiotherapy clinic, with a preparation note below. */
export default function DescriptionListClinicAppointment() {
  return (
    <Card className="mx-auto w-full max-w-md rounded-none bg-background text-base text-foreground shadow-none ring-0 [--card-spacing:--spacing(7)]">
      <CardHeader className="gap-3">
        <Eyebrow tone="ink" className="font-semibold">
          {COPY.eyebrow}
        </Eyebrow>
        <CardTitle className="text-2xl/8 font-normal">{COPY.title}</CardTitle>
        <CardDescription className="text-sm/6">{COPY.booking}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-7">
        <DescriptionList variant="divided">
          <DescriptionListItem>
            <DescriptionListTerm>{COPY.visit}</DescriptionListTerm>
            <DescriptionListDetails>{COPY.visitDetail}</DescriptionListDetails>
          </DescriptionListItem>
          <DescriptionListItem>
            <DescriptionListTerm>{COPY.clinician}</DescriptionListTerm>
            <DescriptionListDetails>
              {COPY.clinicianDetail}
            </DescriptionListDetails>
          </DescriptionListItem>
          <DescriptionListItem>
            <DescriptionListTerm>{COPY.dateTerm}</DescriptionListTerm>
            <DescriptionListDetails>
              <time dateTime="2026-11-12T09:30:00-07:00">{COPY.date}</time>
            </DescriptionListDetails>
          </DescriptionListItem>
          <DescriptionListItem>
            <DescriptionListTerm>{COPY.locationTerm}</DescriptionListTerm>
            <DescriptionListDetails>{COPY.location}</DescriptionListDetails>
          </DescriptionListItem>
          <DescriptionListItem>
            <DescriptionListTerm>{COPY.dueTerm}</DescriptionListTerm>
            <DescriptionListDetails className="font-semibold">
              {COPY.due}
            </DescriptionListDetails>
          </DescriptionListItem>
        </DescriptionList>
        <Collapsible className="rounded-lg bg-muted p-4 text-sm/6" defaultOpen>
          <CollapsibleTrigger className="w-full cursor-pointer text-left font-semibold">
            {COPY.summary}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <Text className="mt-3 text-sm/6">{COPY.prepare}</Text>
            <Text className="mt-3 text-sm/6">{COPY.reschedule}</Text>
          </CollapsibleContent>
        </Collapsible>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

New

description-list-receipt

Receipt

Example of the Description List as an order receipt: dashed edges, a large total and a divided list of details. The description list shows label and value rows such as order or appointment details.

pnpm dlx shadcn add @01orbital/description-list-receipt

npx shadcn add @01orbital/description-list-receipt

yarn shadcn add @01orbital/description-list-receipt

bunx --bun shadcn add @01orbital/description-list-receipt

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Grain } from "@/components/texture/grain"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Northline Press / order 1048",
  title: "Your next good read.",
  footnote: "Printed in small batches. Made to be kept.",
  total: "$32.00",
} as const

const ROWS = [
  { term: "Edition", value: "08 — The Open Road" },
  { term: "Format", value: "Softcover, 192 pages" },
  { term: "Shipping", value: "Included" },
  { term: "Dispatch", value: "November 10, 2026" },
] as const

/** An order receipt with dashed edges, a large total and a divided DescriptionList of details. */
export default function DescriptionListReceipt() {
  return (
    <div className="relative isolate w-full overflow-hidden bg-background p-6 text-foreground [--font-display:var(--font-hanken-grotesk)] sm:p-9">
      <Grain variant="paper" opacity={0.36} />
      <div className="relative border-y border-dashed border-border py-7">
        <Eyebrow>{COPY.eyebrow}</Eyebrow>
        <div className="my-6 flex flex-wrap items-baseline justify-between gap-3">
          <h3 className="font-display text-2xl">{COPY.title}</h3>
          <span className="font-mono text-3xl">{COPY.total}</span>
        </div>
        <DescriptionList variant="divided">
          {ROWS.map((row) => (
            <DescriptionListItem key={row.term}>
              <DescriptionListTerm>{row.term}</DescriptionListTerm>
              <DescriptionListDetails>{row.value}</DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
        <p className="mt-6 text-xs text-muted-foreground">{COPY.footnote}</p>
      </div>
    </div>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

import {
  PAPER_GRAIN,
  SANDPAPER_GRAIN,
  SINGLE_NOISE,
  SQUARE_GRAIN,
} from "@/components/texture/grain-recipes"

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Four grain treatments; each paints a single texture layer.
// Full-bleed art layer — drop inside a `relative` parent; sits behind content.

/** The texture treatment painted by `Grain`. */
type GrainVariant =
  // Stylized paper-look variants — heavier filter chain than plain noise.
  "paper" | "sandpaper" | "square" | "single"

type Layer = {
  src: string
  size: string
  opacity: number
  blend: "overlay" | "soft-light"
}

const BLEND_CLASS: Record<Layer["blend"], string> = {
  overlay: "mix-blend-overlay",
  "soft-light": "mix-blend-soft-light",
}

const VARIANT_TEXTURES: Record<GrainVariant, Layer> = {
  paper: {
    src: PAPER_GRAIN,
    size: "250px",
    opacity: 0.25,
    blend: "overlay",
  },
  sandpaper: {
    src: SANDPAPER_GRAIN,
    size: "200px",
    opacity: 0.25,
    blend: "overlay",
  },
  square: {
    src: SQUARE_GRAIN,
    size: "200px",
    opacity: 0.8,
    blend: "soft-light",
  },
  single: { src: SINGLE_NOISE, size: "200px", opacity: 0.3, blend: "overlay" },
}

/**
 * A decorative grain layer that fills a positioned parent without blocking
 * clicks. Choose a texture and adjust its strength with `intensity` or
 * `opacity`. `className` and other div props land on the outer layer.
 */
function Grain({
  variant = "single",
  intensity = "default",
  opacity,
  isolated = false,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  /** The grain treatment: `single` (default), `paper`, `sandpaper` or `square`. */
  variant?: GrainVariant
  /** Multiplies the texture's opacity: `fine` 0.6×, `default` 1×, `rich` 1.45×. */
  intensity?: Intensity
  /** The texture opacity, from 0 to 1. Takes precedence over `intensity`. */
  opacity?: number
  /**
   * Adds paint containment when true. This creates a stacking context, so
   * the texture stops blending with scene layers outside this element.
   */
  isolated?: boolean
}) {
  const layer = VARIANT_TEXTURES[variant]
  const m =
    opacity != null ? opacity / layer.opacity : INTENSITY_MULT[intensity]
  return (
    <div
      data-slot="grain"
      data-variant={variant}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0",
        isolated && "contain-[paint]",
        className
      )}
      {...props}
    >
      <div
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: layer.size,
          opacity: layer.opacity * m,
        }}
      />
    </div>
  )
}

export { Grain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`

Anatomy

Description List is built from 4 parts. In the example they nest like this:

DescriptionList
└─ DescriptionListItem
   ├─ DescriptionListTerm
   └─ DescriptionListDetails

DescriptionList
DescriptionListItem
DescriptionListTerm
DescriptionListDetails

API reference