Screens
Seven archive.org pages composed from the components and nothing else, covering
the page shells in docs/patterns/page-shells.md. The content is real, read from
the reference pages. Each screen responds to its own width, so the preview switch
shows the 375px layout.
They are drawn with the reference CSS from the Specs tab, not with the elements. As elements match their specs, the screens switch to the real thing, starting with the topnav, buttons and search bar.
Search results
The browse shell: the search band, the search-type tabs, the facet rail beside suggested matches, the results heading, the sort bar and a grid of item tiles. Open full page
Collection landing
The browse shell with a collection masthead, its actions and page tabs, the collection's own search, and a rail with Part Of, over collection tiles. Open full page
Item page
The record shell, as offshoot builds it: the theater, the title with its actions, metadata and reviews beside a sidebar of boxes, then similar items. Open full page
Profile
The browse shell under a navy header: the patron, their page's actions and eight tabs that swap the panel in place. Loans adds the loan filter and Return actions. Open full page
Account settings
One 700px column of sections under a sticky header with Cancel and Save Changes; preferences in three-column rows. Open full page
Log In
The focused-task shell in offshoot's order: logo, title, Google and Email Me a Code, then the form. Open full page
Sign Up
The focused-task shell: one centered form, in the same order as Log In. Open full page