Code Playground

Images

Examples using Next.js Image component

A custom image component that utilizes the Next.js Image component at its core.

Grids

Hero and grid

Using a 12-column grid to handle the layout of a hero component.

Container queries

Search bar example

Using container queries to align sizing with an underlying grid.

Container queries

Card example

Using container queries to align sizing with an underlying grid.

Container queries

Card on true 12-column grid

Using container queries to align sizing with a true 12-column grid.

CSS animation

Focus animation

Experimenting with an animated and transitional focus indicator.

General CSS

Position sticky

Creating a compliant sidebar.