Skip to main content
Tables work for compact, attribute-heavy comparisons. When each option needs a description, link, or visual cue, combine <Columns> and <Card> for a roomier side-by-side layout.

​
Columns for side-by-side content

<Columns> arranges its children side by side, in one to four columns that collapse to a vertical stack on smaller screens. To put text, lists, or code side by side, wrap each column’s content in <Column>.
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 a title, and optional icons, images, or links. In a comparison, cards with links let readers go straight from the comparison to the guide for the option they chose. The example below adds a recommendation before the cards. Side-by-side layouts imply the options are equally valid, so if one option is right for most readers, say so first.
Comparison with cards and a recommendation

​
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 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.
Next up: Components for API documentation—document parameters, responses, nested objects, and examples.