Container
StableA centred page column with a max width and side gutters. Container serves the home pages, Wrap the kit pages.
Container stops growing at 1280 pixels (768 with narrow) and keeps 24 pixel gutters, 32 from 1024 pixels up. Wrap is the kit’s version: the same 1280 cap with gutters of 16, 24 and 32 pixels as the screen widens, and it is what PageIntro and Section use inside. Both are a plain <div>, so the landmark and the background go on the element around them.
Updated View source
Gutters and max width
import type { ReactNode } from 'react'import { Container } from '@rchursin/home/ui'import { Wrap } from '@rchursin/product/shell/layout'
/** * Each band is the full page width. The hatched strips are the side gutters; the solid bar is * the column your content gets. Past the max width the column stops growing and centres. */export default function ContainerGutters() { return ( <div className="flex w-full flex-col gap-7 py-7"> <Band name="Container" spec="max-w-7xl · px-6 lg:px-8"> <Container> <Column>Content column</Column> </Container> </Band> <Band name="Container narrow" spec="max-w-3xl · px-6 lg:px-8"> <Container narrow> <Column>Reading column</Column> </Container>Usage
import { Container } from '@rchursin/home/ui'import { Wrap } from '@rchursin/product/shell/layout'<section aria-labelledby="notes-title" className="py-16"> <Container narrow> <h2 id="notes-title">Release notes</h2> </Container></section>Examples
A reading column
narrow keeps long text near 70 characters a line on a wide screen.
import { Container } from '@rchursin/home/ui'
/** A narrow container keeps a reading column near 70 characters a line on wide screens. */export default function ContainerReading() { return ( <section aria-labelledby="container-reading-title" className="w-full py-12"> <Container narrow className="flex flex-col gap-4"> <h2 id="container-reading-title" className="text-2xl font-semibold tracking-[-0.025em] text-balance"> How the Library is organised </h2> <p className="text-[15px]/7 text-pretty text-fg-2"> Parts are grouped by what they are for, not by size. Start holds the ground everything stands on: colour, type, the logo and the finishing layer. Components are single parts you compose. Patterns are larger pieces made of components, and Resources are icons, page templates and hooks. </p> <p className="text-[15px]/7 text-pretty text-fg-2"> Each entry shows the part running and the code that runs it, with notes on props, keyboard and screen readers where they apply. </p> </Container> </section> )}API
Container props
| Prop | Type | Default | Description |
|---|---|---|---|
narrow | boolean | false | Caps the column at 768 pixels (max-w-3xl) instead of 1280 (max-w-7xl), for reading text. |
className | string | – | Extra classes on the column, e.g. flex or vertical spacing. |
childrenrequired | ReactNode | – | The content of the column. |
Wrap props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes on the column. |
childrenrequired | ReactNode | – | The content of the column. Always max-w-7xl, with px-4 sm:px-6 lg:px-8 gutters. |
Accessibility
- Both render a plain <div> with no role, so they add nothing to the accessibility tree. Put <main>, <section> or <header> around them.
- The gutters never drop below 16 pixels (Wrap) or 24 pixels (Container), so text never touches the edge of a phone screen.
- The column is w-full and centred with auto margins: it never causes sideways scrolling on its own.
Guidelines
Do
- Put the background on a full-width <section> and the Container inside it, so grounds run edge to edge while text stays in the column.
- Use narrow for long reading text.
- Use Wrap on kit pages, so edges line up with PageIntro and Section, which use it inside.
Don’t
- Don’t nest containers: the gutters add up.
- Don’t mix Container and Wrap in one page: their phone gutters differ (24 and 16 pixels), so edges won’t line up.
In use
Used on this site
Related
- SectionA page band with an eyebrow, an h2 and a lead, on a plain or sunken ground. SectionHeading is the heading block alone.
- Page introThe top of a kit page: an eyebrow, the page’s h1, a lead and a row of facts, over film grain and a soft ceiling light.
- Control RoomA home page where the product is the hero: a live dashboard shot, a bento of features, a run wall and an FAQ.
Source
The component’s own files, exactly as they run on this site.
/** * Small building blocks shared by the four home pages. * All black-and-white; every state is told apart by shape or text, never by colour alone. */import { useEffect, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type MouseEvent, type ReactNode,} from "react"import { cx } from "../components/cx"import { useIsApple } from "../product/lib/hotkeys"import { copyText } from "../product/ui/code"import type { Verdict } from "./content"
/** Stagger index for .lux-reveal children (each step is 70ms) */export const delay = (d: number) => ({ "--d": d }) as CSSProperties