Pattern library

A small sampler of components

As it stands, this section is deliberately simple and essential: not a sprawling library, but a small sample of components that come up frequently in everyday work.

The goal is to give you a first practical approach to common interface elements — a menu, a form, a card, a reading index — built with clean code and a careful eye on accessibility.

Use them as a starting point to study, take apart and reshape however you like, adapting them step by step to what your own projects need. Every page includes an interactive demo, a few usage notes and the source code ready to read.

A visual overview of interactive front-end components

Long-form reading

Reading index

An index with a progress bar, active section highlighting and a quick jump back to the top, meant for guides and long-form documentation.

Open component

Content preview

Content card

Cards for resources, tools, articles or templates, with badges, meta information, a CTA and an accessible saved state.

Open component

Responsive navigation

Accessible header

A responsive header with a mobile menu, current-page state, aria-expanded, visible focus and closing on Escape.

Open component

Input experience

Validated form

A contact form with labels, errors wired to their fields, a loading state and a final feedback message screen readers can announce.

Open component