> ## 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.

# Inline links or cards — when to use each one

> Each navigation option carries a different signal about how important the destination is. Choose the right one to guide readers to the right content.

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 <div className={"quiz-container" + (checked ? " quiz-checked" : "")}>
      <Badge color="green">Quiz</Badge>
      <p className="quiz-question" id={quizId + "-question"}>{question}</p>
      <div className="quiz-options" role="radiogroup" aria-labelledby={quizId + "-question"} aria-disabled={checked}>
        {answers.map((answer, i) => <label key={i} className={["quiz-option", !checked && selected === i ? "quiz-option-selected" : "", checked && answer.correct ? "quiz-option-correct" : "", checked && selected === i && !answer.correct ? "quiz-option-incorrect" : ""].filter(Boolean).join(" ")}>
            <input type="radio" name={"quiz-" + quizId} checked={selected === i} onChange={() => !checked && setSelected(i)} disabled={checked} />
            <span className="quiz-radio" />
            <span className="quiz-option-label">{answer.text}</span>
          </label>)}
      </div>
      {checked && <div className={"quiz-feedback " + (isCorrect ? "quiz-feedback-correct" : "quiz-feedback-incorrect")} role="status" aria-live="polite" aria-atomic="true">
          <span className="quiz-feedback-icon">{isCorrect ? "✓" : "✗"}</span>
          {isCorrect ? correctFeedback : incorrectFeedback}
        </div>}
      <div className="quiz-actions">
        {!checked ? <button className="quiz-btn quiz-btn-check" type="button" onClick={() => selected !== null && setChecked(true)} disabled={selected === null}>
            Check answer
          </button> : <button className="quiz-btn quiz-btn-reset" type="button" onClick={reset}>
            Try again
          </button>}
      </div>
    </div>;
};

Inline links and cards are not interchangeable. Each carries a different implication about how important the destination is and how much the reader should interrupt their flow to follow it.

Before adding a navigation element, ask how much attention the destination deserves. That answer determines the right component.

## Inline links

An inline link is the default. Use it when:

* The reference is contextual. The reader might want more detail, but continuing without following it is fine.
* The destination is supplementary, not required.
* The link appears within a sentence.

```mdx theme={null}
Mintlify uses the [Diátaxis framework](https://diataxis.fr) as a model for content types.
```

This is a hint, not a call to action. Most readers continue reading. Some open the link for context. The inline format correctly signals its optional nature.

Inline links are also right for cross-references between closely related pages, citations, and anywhere the link is one of several possible paths forward. It's not the primary next step.

## Cards

A card is a call to action. Use it when:

* There's a clear next step and you want to make it prominent.
* The destination is important enough to interrupt reading and draw attention.
* You're pointing to a page the reader should visit before continuing.
* You're at the end of a section or page and guiding the reader forward.

Cards are meant to capture attention. Readers generally notice cards but can skim past inline links.

Use a card over an inline link when the destination is important enough that you want it visible even to readers who are skimming.

## Choosing between links and cards

| Situation                                 | Component        |
| ----------------------------------------- | ---------------- |
| Reference within prose                    | Inline link      |
| Supplementary reading the user might want | Inline link      |
| Next step in a linear flow                | Card             |
| Decision point with two to four options   | Cards in columns |

<Quiz
  question="Part way through a setup guide, you want to point to a security best practices page. Most users don't need to read it now, but it's useful context. Which component fits?"
  answers={[
{ text: "A card. It's important enough to call out.", correct: false },
{ text: "An inline link. It's supplementary context, not a required next step.", correct: true },
{ text: "Nothing. Link to it at the end of the guide instead.", correct: false },
{ text: "A card at the end of the page pointing to it.", correct: false },
]}
  correctFeedback="Right. Supplementary context that most users can skip is an inline link. A card would interrupt the flow and imply the reader should stop and read it before continuing. Inline links let interested readers follow the reference without derailing everyone else."
  incorrectFeedback="A card says 'this is your next step.' That's not right for an optional reference part way through a guide. An inline link signals: this is available if you want it, but you can keep reading."
/>

<Check>
  Next up: [End-of-page navigation patterns](/courses/components/end-of-page) — What to put at the bottom of a page to help readers continue naturally.
</Check>