> ## Documentation Index
> Fetch the complete documentation index at: https://learn.mintlify.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Columns and cards for visual comparisons
> Use columns and cards when a table is too rigid or your comparison items need richer content than a cell can hold.
export const Quiz = ({question, answers, correctFeedback, incorrectFeedback}) => {
const [selected, setSelected] = React.useState(null);
const [checked, setChecked] = React.useState(false);
const quizId = React.useId();
const isCorrect = checked && answers[selected]?.correct;
const reset = () => {
setSelected(null);
setChecked(false);
};
return
;
};
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, `` with `` components gives you a side-by-side layout with more room to work.
## Columns for side-by-side content
`` arranges any children components horizontally. Organize cards into one to four columns that responsively collapse to a vertical stack on smaller screens.
```mdx Side-by-side comparison with columns theme={null}
**API key authentication**
Simple to set up. Best for server-to-server requests where user identity doesn't matter. Not suitable for client-side code because the key would be exposed.
**OAuth 2.0**
More setup required. Required when you need to act on behalf of a user. Tokens are short-lived and scoped, which limits the damage from a token leak.
```
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
`` 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.
```mdx Comparison with cards theme={null}
Server-to-server requests. Simpler setup. Not for client-side use.
User-delegated access. Required for acting on behalf of users. More setup.
```
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.
```mdx Comparison with a recommendation theme={null}
For most users, API key authentication is the right choice. Use OAuth if your app needs to access resources on behalf of individual users.
Server-to-server requests. Simpler setup. Not for client-side use.
User-delegated access. Required for acting on behalf of users. More setup.
```
Next up: [Cards as navigation](/courses/components/cards-navigation) — Use cards to guide readers to their next step.