The anatomy of a webpage
Every webpage can be broken down into three groups:
Global components
Global components are elements that appear on every page, usually once. They provide consistency across your site.
Examples: headers, footers, navigation, cookie banners.
Blocks
Blocks (sometimes referred to as components) are the main building units of a page. Think of them as Lego bricks: reusable and modular. You can add blocks to any page, in any order, to create layouts greater than the sum of their parts.
Examples: call to action, testimonial grid, contact form
Elements
Elements are the smallest functional parts, used inside blocks or global components.
Examples: buttons, form fields, images, headings, icons.
Variants
Both blocks and elements can have variants, adding flexibility while keeping the overall design consistent.
Examples:
- A button (element) may have “primary” and “secondary” variations, changing its colour depending on placement or purpose
- A team block might have card or list views – it’s the same block, using the same data, but presented differently
Templates
Templates define a content type such as a landing page or a blog post. While templates are still built from the three groups above, they determine which blocks are available for that type of page.
Certain blocks might make more sense for a landing page (like a team block), which wouldn't make sense on a blog. To make it easier for content editors, blocks are limited to a template where they make sense.
Bringing it all together
This modular approach is what makes modern websites flexible and easier to maintain. Instead of designing every page from scratch, you're building a toolkit of reusable parts. Need a new landing page? Just combine existing blocks in a fresh way. Want to update your call-to-action style? Change it once and it updates everywhere.
This thinking will save you time and money, both during your redesign and for years to come.