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

# How to use Mintlify components

> Learn which components to use and when, so your documentation stays clear and consistent.

Mintlify includes callouts, cards, tabs, steps, code blocks, and more. Used well, these components help readers find what they need and follow complex instructions. Used poorly, they get in the way.

This course will help you choose the right component for the job and use it well.

Each lesson pairs a component (or a group of related components) with concrete guidance on how to use it to support your users.

<Tip>
  Don't have a Mintlify account yet?

  Follow along with the lessons and try out all the components in the [editor sandbox](https://www.mintlify.com/editor-sandbox).
</Tip>

## What you'll learn

* How to choose between components that look similar but signal different things to readers
* When standard prose or a plain list is better than a rich component
* How to handle procedures that branch by platform, role, or user choice
* How to use code blocks, code groups, and inline explanations to match your audience's needs

## Who this is for

Anyone who contributes to documentation on Mintlify and wants to use components more deliberately. It's especially helpful if you're new to technical writing or writing for the web.

## Lessons in this course

### Call attention to important information

* [Choose the right callout](/courses/components/callout-types) — What each callout type tells readers.
* [When callouts stop working](/courses/components/callout-fatigue) — How to recognize and fix callout fatigue.
* [Site-wide, page-level, and inline signals](/courses/components/banner-tag-badge) — When to use banners, tags, and badges.

### Guide readers through a process

* [Steps or numbered lists](/courses/components/steps-or-lists) — Choose the right structure for a sequence.
* [Describe branching procedures](/courses/components/branching-procedures) — Help readers follow the path that applies to them.
* [When a procedure outgrows a page](/courses/components/complex-procedures) — Split a long procedure without losing the thread.
* [Progressive disclosure with accordions](/courses/components/accordions) — Keep optional details nearby without hiding the main path.

### Share code and variations

* [Code block essentials](/courses/components/code-blocks) — Make examples easier to understand and use.
* [When to explain code and when to just show it](/courses/components/code-in-context) — Match the explanation to the reader and page.
* [Tabs for platform and audience variation](/courses/components/tabs) — Show one relevant version without hiding a comparison.
* [Code groups for multi-language examples](/courses/components/code-groups) — Let readers choose their language.
* [Conditional content](/courses/components/conditional-content) — Change an entire page with `<View>`.

### Compare and describe structured information

* [Tables for structured comparisons](/courses/components/tables) — Use rows and columns when the content is genuinely tabular.
* [Columns and cards for visual comparisons](/courses/components/columns-and-cards) — Give richer options more room.
* [Components for API documentation](/courses/components/api-components) — Document parameters, responses, nested objects, and examples.

### Add visual context and navigation

* [Images, frames, and diagrams](/courses/components/visual-content) — Choose visuals that explain something prose cannot.
* [Cards as navigation](/courses/components/cards-navigation) — Help readers choose a destination.
* [Inline links or cards — when to use each one](/courses/components/links-vs-cards) — Match the visual weight to the importance of the link.
* [End-of-page navigation patterns](/courses/components/end-of-page) — Help readers decide what to do next.

### Use smaller supporting components

* [Small components with specific jobs](/courses/components/supporting-components) — Decide when tooltips, updates, panels, prompts, tiles, icons, and colors belong on the page.