Ordering patterns

Same components, different order.

The component set is reusable; page order follows the communication goal. These neutral sequences demonstrate how hierarchy changes without assuming a specific industry.

Browse components See the architecture

By communication goal

Goal-based ordering patterns

Action-first

Direct response

Hero → Primary action → Benefits → Evidence → Process → Objections → Final action

Trust-first

High consideration

Hero → Credentials → Outcomes → Approach → Details → Quotes → Questions → Contact

Explore-first

Content discovery

Hero → Categories → Featured items → Filters → Supporting story → Newsletter → Footer

Work-first

Visual proof

Hero → Selected work → Capabilities → Process → Context → Quotes → Contact

By purpose

Extended component families

The extended registry is grouped by purpose—motion, layout, navigation, feedback, and data display—rather than labeling every addition as animation.

Carousel

Motion · Controlled content rotation.

View →

Marquee

Motion · Repeating label ticker.

View →

Scroll reveal

Motion · Optional entrance enhancement.

View →

Bento grid

Layout · Mixed-size content arrangement.

View →

Timeline

Data display · Ordered milestones.

View →

Before / after

Interaction · Two-state visual comparison.

View →

Tabs

Navigation · Related content views.

View →

Progress bars

Data display · Measurable values.

View →

Comparison table

Data display · Comparable tiers or editions.

View →

Flip cards

Interaction · Two-state supporting detail.

View →

Notice banner

Feedback · Dismissible status message.

View →

Countdown

Data display · Time-to-milestone.

View →

Table of contents

Navigation · Long-form section links.

View →

Code block

Content · Copyable technical example.

View →

Call-to-action band

Action · Focused next step.

View →