Atlas can present the same comparison as a table, a set of cards, or a slider. Choose the layout from the way readers need to compare the content, then test it at wide and narrow widths.
Use a table for direct comparison
A table works well when every option uses the same row labels and readers need to compare values across columns. Keep the number of columns and the length of each row under control. Atlas can replace the desktop table with responsive cards when the available width becomes smaller.
Use static cards for straightforward reading
Select Static when the responsive cards should appear without slider interaction. This is useful when readers should scroll through every option naturally and when the number of cards remains manageable.
Use a slider for several options
Select Slider when the comparison needs to keep cards at a readable width while allowing readers to move through several options. The Atlas demo uses this mode for both pricing and image-based product comparisons.
Configure the slider
Use Cols Desk, Cols Tab, and Cols Mob to set how many cards are visible at each device range. The matching Step settings control how many cards advance at once. Peek Next reveals part of the next card, Peek % controls how much is visible, and Slide Gap sets the space between cards. Use Dots when the current slider position should be visible.
Choose how rows behave
Card Rows: Synced keeps corresponding rows aligned across cards and is best for direct feature comparison. Independent lets each card follow its own content height and is better when the cards contain different amounts or types of information.
Check every responsive state
Preview at desktop, tablet, and mobile widths. Check that prices and headings remain readable, buttons are not crowded, the next card is discoverable, and static cards appear in a useful order. Do not rely on the desktop preview alone.
Related guides
See Getting started with Atlas, Styling cards and headers in Atlas, and Troubleshooting Atlas and improving accessibility.