Markdown examples

This page shows one example of each available layout component. Use it as a reference when you’re writing or updating documentation pages. Each section is titled so you can quickly find the component you want.

Tip callout

Keep callouts short and action-oriented. If you need more than a few sentences, consider moving the details into an accordion.

Note callout

Notes are best for extra context (for example, plan availability, default behavior, or how something is named in the app).

Info callout

Use an Info callout when the information is helpful for most readers and you want it to stand out without sounding urgent.

Warning callout

If you change a setting that affects other people (like a shared workspace preference), let your team know first to avoid confusion.

Danger callout

Deleting data is usually permanent. Before you confirm a delete action, double-check you’re in the correct workspace and item.

Steps

Use Steps when the reader must follow a specific order. Keep each step focused on one outcome.

From the app’s main navigation, go to the area you’re documenting (for example, Settings or Workspace).

Update the field or selection. If there’s a confirmation dialog, read it carefully and confirm only if it matches your intent.

Refresh the page (if needed) and confirm the change is visible where users expect to see it.

Accordion

Use an accordion for optional details, FAQs, and “good to know” information that not everyone needs.

Use an accordion when the page becomes hard to scan, or when you have detail that only some readers will want (like edge cases, troubleshooting, or definitions).

Don’t hide critical steps or requirements in an accordion. If the reader must see it to complete the task, keep it in the main flow of the page.

Tabs

Use tabs to present alternatives side by side (for example, different roles, different ways to do the same task, or different outcomes).

Use this tab style when you want a short, scannable comparison. Keep the content roughly the same length across tabs so the layout stays readable.

Best for: brief variations
Keep: 3–5 bullets max

Use this tab when readers need more guidance for a specific path. If it turns into a long tutorial, consider linking to a separate page instead.

Example placeholder:
1) Choose the option
2) Confirm the change
3) Validate the result

Card group

Use a card group to point readers to related pages or to help them choose where to go next. Keep card descriptions short (1–2 sentences).

Set up your account, confirm the basics, and learn where key settings live in the app.

Step-by-step guides for the tasks people do most often.

Fix common issues and learn what to check before contacting support.

Frame

Use a frame to highlight a screenshot, diagram, or any visual you want to stand out from the rest of the page content.

Example framed content

Replace this box with a screenshot or diagram when you have one. If you add an image, include clear alt text describing what the reader should notice.

Markdown examples