Dispatch Colophon

An editorial footer that opens with a large outlined italic serif sign-off, then a ruled row with a mono issue number, a short blurb and an underlined email field whose primary button stretches into an inline success state. Legal links sit in a mono row underneath. Every colour comes from theme tokens, so it follows light and dark mode and the palette picker. All copy and links come from props, and onSubmit receives the entered email. Layout scales through container query units. Transitions stop when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add dispatch-colophon

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/dispatch-colophon.tsx.
3. Paste the code.

Usage

import { DispatchColophon } from "@/components/ui/dispatch-colophon";

export default function Example() {
  return (
    <div className="relative aspect-video w-full overflow-hidden">
      <DispatchColophon onSubmit={(email) => console.log(email)} />
    </div>
  );
}

Props