Use layouts

This is for:

In this article

An Atomic layout is an out-of-the-box way of positioning Atomic components in a webpage. Instead of writing CSS, you can define a parent layout and a number of child sections (for example, search, facets, pagination, etc.). Child sections can also serve as parents as they can nest other sections. Each section can nest only specific components, as shown in the diagram below.

It’s important to carefully define the layout structure. However, some optional sections can be left out.


Atomic currently includes only the search layout. Atomic will include more layouts in the future for agent panels, commerce pages, etc.

The Search Layout

A diagram that shows the search layout

Here are the possible sections for your search layout: