Design system · Component review 30

Demo catalog

The Guide already has a clear lesson index. The shared catalog is for browsing many independent Reference specimens inside the Design System. This review refines that disclosure without changing the Guide index or the Reference lesson pages.

The refined shared recipe disclosure is adopted. The original Guide index and Reference lessons remain in place.

Navigation treatments

Open the clear examples by pointer, Enter or Space. Both shared variants use real Reference scenes; their class labels and destination links are identical.

01

Original Guide

Established category navigation

Browse guides 5

The Guide presents paths into its lessons through a compact card grid. It keeps that existing navigation and does not need recipe disclosures.

02

Current

Shared recipe catalog

Document flow2 recipes

Clear a right floatclear:right
Read the example and source ↗
Clearing right floats
The blue block clears the right float. Its text still wraps around the taller left float, whose box overlaps the blue background.
Clear both sidesclear:both
Read the example and source ↗
Clearing both left and right floats
The blue element clears the requested side. Unequal float heights make left, right and both visibly different.

A categorized index leads to native disclosure rows. Each row keeps its Reference preview in server-rendered HTML and links to the complete lesson.

03

Adopted

Sharper disclosure hierarchy

Document flow2 recipes

Clear a right floatclear:right
Read the example and source ↗
Clearing right floats
The blue block clears the right float. Its text still wraps around the taller left float, whose box overlaps the blue background.
Clear both sidesclear:both
Read the example and source ↗
Clearing both left and right floats
The blue element clears the requested side. Unequal float heights make left, right and both visibly different.

The same native details gain clearer tap and focus areas, a distinct class marker, calmer open state and more comfortable preview inset.

Actual Reference scene

The catalog expands the same float-clearing lesson used in the published Reference.

Open /reference/clear
Clearing right floats
The blue block clears the right float. Its text still wraps around the taller left float, whose box overlaps the blue background.

The disclosure and category links sit outside this specimen, so they do not become part of the float layout.