Website section types

Every screenshot is filed under the job its section does on the page. Pick a type to compare how different companies design it, side by side.

Every section type, defined

What each label means, with the number of examples in the library.

  • Explains what the product does: feature grids, bento layouts, alternating text/visual rows, product UI walkthroughs, capability lists.

  • The opening section of a landing page: main headline + supporting copy + primary call-to-action, usually with a product visual or artwork.

  • Social proof from people: customer quotes, reviews, ratings, tweet walls, case-study cards with a quote.

  • The site footer at the very bottom: link columns, legal/copyright, social icons, sometimes a large wordmark or newsletter field.

  • A closing call-to-action band: short headline + button(s) (or a signup field) near the end of the page, before the footer.

  • Plans and prices: pricing tiers/cards, monthly/yearly toggles, plan feature comparison tables.

  • The section is mainly a row or grid of customer / partner / investor logos ('Trusted by…').

  • Benefit-led 'why us' statement with little product detail: a big claim plus a few short benefit points or outcomes.

  • Frequently asked questions, usually as an accordion or Q&A list.

  • Shows the tools the product connects to: grids/orbits of third-party app icons, connector diagrams, 'Works with your stack'.

  • Lists content: blog posts, articles, guides, news, changelog, events, webinars, docs links as cards.

  • A numbered or ordered process: steps 1-2-3, a timeline, a workflow diagram explaining how the product is used.

  • Organised by audience: tabs or cards per role, team, industry or use case ('For sales', 'For engineering', 'Fintech', 'Healthcare').

  • Security, privacy and compliance: SOC 2 / ISO / GDPR / HIPAA badges, encryption, enterprise-grade trust claims.

  • Company story, mission statement, manifesto, values, 'Why we built this'.

  • The section is mainly large numbers / metrics with labels (e.g. '10M+ users', '99.9% uptime').

  • Compares the product against competitors or the old way: 'Us vs them' tables, before/after, check vs cross columns.

  • People behind the company: team member photos/cards, founders, investors, advisors.

  • Contact or demo request: contact forms, 'Book a demo' forms, sales contact details, office locations.

  • Other sections

    11

    Anything that fits none of the above (gallery, map, showcase, app download banner…).

    ↑↓ Navigate ↵ Open

    Section preview

    Website section