Web Patterns

Sections that prompt the next action, such as making an inquiry or signing up.

Sections that collect frequently asked questions and answers. Use dl, dt and dd to express the question-answer relationship.

Sections that line up the features or highlights of a service or product.

Sections that deliver a greeting or message.

Fully styled hero sections placed at the top of a page. See Page Layouts when you need the bare structure instead.

Sections that present a history or timeline in chronological order.

Sections that present basic information such as location and business hours.

Sections that introduce team members or staff as a list.

Sections that gather links to categories or lower-level pages.

Sections that list news and announcements.

Sections that lay out pricing plans for comparison.

General-purpose section structures that are not tied to a specific use case. Examples of combining headings, body text and images.

Sections that showcase customer voices and reviews.

Sections that list portfolio works and case studies.