Reference

Application sidebar patternStable

Provide persistent workspace navigation in logical document order without owning application routing or permissions.

Bottom navigation patternStable

Keep a small set of primary application destinations reachable with large touch targets near the viewport edge.

Dock navigation patternStable

Present a compact group of peer workspace tools as ordinary destinations rather than desktop-style launch mechanics.

Full-screen menu patternStable

Present an expansive application destination list as a complete named landmark with a durable return link.

Site header patternStable

Frame a site identity and its primary destinations in a resilient header landmark without owning routing or application state.

Table of contents patternStable

Provide an in-page map of real heading targets using an ordinary navigation landmark and fragment links.

Mega menu patternPreview

Organize a larger set of site destinations into visible, headed groups inside a native disclosure.

Navigation menu patternPreview

Present durable site destinations, with optional native disclosure for a compact group of related links.

Hero patternStable

Introduce one page promise and its next actions without displacing the document heading hierarchy.

Announcement patternPreview

Present a single promotional, launch, or advisory message alongside its next action without displacing the document heading order.

Call to action patternPreview

Focus one supporting message and one honest next destination near the end of a content sequence.

Contact patternPreview

Collect an inbound message through a native, server-submitted form with visible expectations and no required JavaScript.

Content section patternPreview

Compose editorial copy with optional supporting image or poster-first video while preserving a coherent reading order.

FAQ patternPreview

Answer a finite set of supporting questions with native disclosure semantics.

Feature grid patternPreview

Explain a set of peer capabilities in semantic articles that reflow intrinsically.

Logo cloud patternPreview

Present a finite set of client or partner marks as labelled supporting evidence.

Newsletter patternPreview

Collect a subscriber address through a native, server-submitted form with clear expectations.

Pricing patternPreview

Compare server-owned offers while keeping price, billing period, inclusions, and destination explicit.

Site footer patternPreview

Close the page with supporting navigation, ownership, and policy information.

Stats pattern patternPreview

Pair a small set of meaningful measures with explicit labels.

Team patternPreview

Introduce a finite set of collaborators with names, roles, and optional biographies in a semantic list of articles.

Testimonial patternPreview

Attribute a short endorsement without manufacturing interactive carousel behavior.

Product card patternStable

Summarize a server-authored product with a durable detail-page link, honest price, inventory message, and resilient media treatment.

Collection patternPreview

Compose addressable product discovery around a normal GET filter form and durable product links.

Empty results patternPreview

Explain an empty server response and provide durable recovery destinations without recreating collection filters or hiding the zero-result state in client code.

Product detail patternPreview

Compose server-owned product media, price, inventory, variants, quantity, and purchase submission without duplicating commerce truth in the component.

Product filters patternPreview

Filter a collection with URL-addressable native GET controls that can be progressively enhanced.

Product recommendations patternPreview

Present server-selected related products without making recommendation logic or product truth a browser concern.

Product sorting patternPreview

Change a collection's server-owned result order through an addressable GET request without taking ownership of filters or product truth.

Alert dialog patternPreview

Require acknowledgement of an urgent message with the native dialog top layer and focus model.

Confirm dialog patternPreview

Confirm a consequential action using native dialog and form submission semantics.

Drawer patternPreview

Present supporting navigation or commerce content from the inline-end edge.

Sheet patternPreview

Present a short contextual task from the block-end edge of the viewport.

Slide-over patternPreview

Present a focused editing task beside wide content and as a bottom sheet on narrow viewports.

Compare and diff patternPreview

Compare two authored versions while preserving reading order and expressing removals and additions with native HTML rather than color alone.

Responsive table patternPreview

Keep genuinely tabular relationships intact in narrow containers by providing an explicitly labelled horizontal scrolling region.

Stats patternPreview

Present a small set of labelled measures with explicit units, qualifiers, and unavailable states in an intrinsic grid.

Steps patternPreview

Present an ordered sequence while preserving list order, headings, and authored current-step state.

Timeline patternPreview

Show chronological events or authored milestones while keeping their order, headings, dates, and status meaningful in the document.

Quantity input patternPreview

Collect a bounded numeric quantity with a native number input and optional, touch-friendly stepper buttons.

Rating patternPreview

Collect one rating value through a native radio group whose selected state is visible without relying on color alone.