Layout

Components that structure a page: the centred page container, the two-column detail layout with sticky sidebar, the section divider, and the off-canvas drawer for collapsed sidebars.

PageContainer

Max-width centred container with the museum-register horizontal padding scale (px-12 / px-6 / px-4). Single source of truth — every page surface, breadcrumb row, footer, and detail layout sits inside one.

PageContainer content sits here · max-w-[80rem] · responsive horizontal padding
<PageContainer> centred, max-w-[80rem], padded

DetailLayout

Two-column detail-page layout — main content + sticky right sidebar. Used by specimen, institution, and collection detail pages. Sidebar pins on lg+ at natural height (no inner-scroll), collapses below the main column on md and smaller.

MAIN COLUMN
Specimen hero typography → Specimen overview → Constituent parts → Locality map
SIDEBAR (sticky)
Image (if any)
On-page nav
Citation block
Attribution card
<DetailLayout> sticky right sidebar, no inner-scroll

Divider

Hairline horizontal rule for separating page sections in the main column. Quiet visual register — the museum doesn't shout dividers. For typographic section breaks with a label, use .section-divider from Utilities instead.

First section content.


Second section content.

<hr /> quiet hairline

Drawer

DaisyUI's drawer primitive — off-canvas panel that slides in from the side. We reach for it on small screens where the filter sidebar of the discover results doesn't fit alongside the result grid: the sidebar collapses into a drawer behind a "Filters" button. On lg+ screens the sidebar is inline and the drawer is unused.

Result grid sits here. The drawer is closed by default; toggle it from the button.

<input type='checkbox' class='drawer-toggle' /> filter-sidebar drawer — open in this preview