Atlas turns structured comparison content into a desktop table and responsive card layouts. Start with the content and row structure before adjusting colors or decorative settings.
Plan the comparison
Decide which plans, products, services, or other options you want to compare. List the information that should appear in every option and keep the labels and order consistent. A small, focused comparison is easier to scan than a large table with unrelated details.
Build the structure
Add Atlas to the page.
Add an Atlas child stack for each option that should become a comparison column or card.
Enter the content needed for each option. Atlas supports rows, badges, icons, images, prices, and buttons.
Use the same row order across the child stacks when readers need to compare values directly.
Preview the result at desktop and narrow widths before styling it.
Set the feature column
Use Show Feature when the desktop comparison needs a dedicated column for row labels. Change Feature Label from its default when a more specific label, such as “Capability” or “Included”, helps readers understand the table.
Choose the basic layout
Width switches between a full-width and content-width presentation. Mode controls whether responsive cards remain static or become a slider. The best choice depends on the number of options and how much content each card contains.
Check the first result
Confirm that headings, prices, rows, badges, media, and buttons appear in the intended order. Compare at least one wide and one narrow preview. If rows do not line up or the cards become crowded, adjust the card-row and responsive settings before changing typography or colors.
Next steps
Continue with Choosing responsive layouts in Atlas and Styling cards and headers in Atlas. You can also open the Atlas demo to compare several real layouts.