Skip to main content
Tables work for compact, attribute-heavy comparisons. But sometimes the items you’re comparing need more than a few words per cell. They need a description, a link, or a visual cue. For these cases, <Columns> with <Card> components gives you a side-by-side layout with more room to work.

​
Columns for side-by-side content

<Columns> arranges any children components horizontally. Organize cards into one to four columns that responsively collapse to a vertical stack on smaller screens.
Side-by-side comparison with columns
This layout works when you’re presenting two or three alternatives that need more information than a table cell can hold, but not so much that they each need their own page.

​
Cards in a comparison context

<Card> components add structure with a title, and optional icons, images, or links. In a comparison layout, cards let readers navigate directly to the option that applies to them.
Comparison with cards
The link on each card means users who know which option they need can navigate directly from the comparison to the relevant guide.

​
When are columns and cards the right choice?

Use columns with cards when:
  • You have two to four options and each needs a short description.
  • Each option links to a separate page where users can get the full details.
  • The options are genuinely parallel. They are the same kind of thing, but with different tradeoffs.
  • A table would be too rigid because the options don’t have a neat attribute/value structure.

​
Columns imply equal options

Side-by-side layouts imply the options are equally valid. If one option is strongly preferred for most users, putting them side by side can understate that. When one option is clearly better for most cases, tell your users explicitly before showing the comparison.
Comparison with a recommendation
Next up: Cards as navigation — Use cards to guide readers to their next step.