Skip to main content

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.

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
<Columns cols={2}>
  <Card>
    **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.
  </Card>
  <Card>
    **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.
  </Card>
</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
<Columns cols={2}>
  <Card title="API key authentication" icon="key" href="/guides/auth-api-key">
    Server-to-server requests. Simpler setup. Not for client-side use.
  </Card>
  <Card title="OAuth 2.0" icon="lock" href="/guides/auth-oauth">
    User-delegated access. Required for acting on behalf of users. More setup.
  </Card>
</Columns>
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
For most users, API key authentication is the right choice. Use OAuth if your app needs to access resources on behalf of individual users.

<Columns cols={2}>
  <Card title="API key authentication" icon="key" href="/guides/auth-api-key">
    Server-to-server requests. Simpler setup. Not for client-side use.
  </Card>
  <Card title="OAuth 2.0" icon="lock" href="/guides/auth-oauth">
    User-delegated access. Required for acting on behalf of users. More setup.
  </Card>
</Columns>
Next up: Cards as navigation — Use cards to guide readers to their next step.