Page layout components help organise content into clear, responsive sections. Combine sections, containers, grids, columns, stacks, cards and split layouts to create structure without having to build each layout from scratch.
Tip: Start with the content and choose the simplest layout that presents it clearly. A page doesn't need lots of columns or panels to look good.Grids and columns
Use a grid when several pieces of related content should appear alongside one another. Choose the number of columns and place the content for each inside a column.
This example also shows how different card padding settings affect the amount of space around the content.
Large padding
More space around the content can give an important card a spacious, prominent appearance.
Medium padding
A balanced amount of space works well for many everyday cards and content panels.
Small padding
Compact padding is useful when you need to present information in less space.
Sections
A section creates a full-width area of the page and can provide its own background and vertical spacing.
Sections are useful for separating larger parts of a page — for example an introduction, services area, call to action or contact section.
Built-in background choices can include default, muted, accent, dark and transparent, while spacing can be set to none, small, medium or large.
You can also add an ID or class when a section needs additional customisation.
Containers
A container constrains content to a comfortable readable width and centres it within the available space.
Containers are particularly useful inside full-width sections when you want the section background to extend across the page while keeping the text itself from becoming too wide.
A useful pattern is: full-width section → container → content.Stacks
A stack places pieces of content one after another with consistent spacing between them.
They're useful when several elements belong together but don't need columns — for example a heading, paragraph and button in a call-to-action area.
Components can be nested
This card sits inside the stack, which sits inside a panel. Layout components can be combined to create more structured sections while keeping the individual parts predictable.
Card styles
Cards visually group related information. They work particularly well for services, features, benefits, team members, steps or other repeated pieces of content.
This grid demonstrates several available card styles.
Accent
Useful when a card needs additional emphasis.
Outline
A lighter way to group content without a strong background.
Default
A general-purpose card for everyday content.
Contrast
Useful when a stronger visual distinction is appropriate.
Split layouts
A split creates two responsive areas of content. It's useful when two pieces of information belong together but benefit from being shown side by side.
Common examples include an image with supporting text, a product with an explanation, a testimonial with a photograph or information alongside a contact form.
Combine images and text
This example gives more space to the right-hand column while keeping the image and text together as one section.
Use split layouts when the relationship between the two sides is meaningful. Avoid creating columns simply to fill empty space.
You can vary the ratio depending on the content. An important image may deserve more room, while a longer explanation might benefit from the wider column instead.
Organise detailed information
Interactive components can also sit inside responsive layouts. This can be useful when a page contains several different types of supporting information.
The example below places an accordion and tabs side by side on larger screens.
Accordion
Accordions work well for information that visitors may want to reveal only when it's relevant to them.
Frequently asked questions
Use an accordion to keep answers available without displaying every piece of information at once. This works particularly well for FAQs and supporting information.
Delivery or practical information
Group related details under a clear title so visitors can quickly find the information they need.
Additional details
Keep titles descriptive. Visitors should have a good idea what they'll find before opening an item.
Tabs
Tabs work well when several related categories of information deserve roughly equal importance.
Use the first tab for the information most visitors are likely to need. Keep each tab focused on a distinct subject.
Use additional tabs for specifications, features, instructions or other supporting information.
Avoid creating too many tabs. If information naturally belongs together, it may be easier to read as a normal section instead.
Choosing the right layout
You don't need to use every layout component on every page. Start with the information you need to communicate, then add structure where it improves readability.
A useful way to think about the main layout components is:
Section — creates a distinct full-width area of a page.
Container — keeps content within a comfortable readable width.
Grid — arranges several related items into columns.
Column — holds individual content within a grid or split.
Split — creates two related content areas with adjustable proportions.
Stack — keeps vertically arranged elements evenly spaced.
Panel — visually separates a larger group of content.
Card — groups a smaller, self-contained piece of information.
Keep layouts purposeful
Good layout helps people understand the content.
Use spacing to separate ideas, columns to show relationships and cards or panels to group information that belongs together.
If a simple heading and paragraph communicates something clearly, you don't need another component around it.
