Callouts

Six variants: tip, info, warn, stop, new, success.

Pro Tip

Tip callout with bold and a link.

Info

Informational callout body text.

Important

Warning callout body text.

Don't

Stop callout body text.

New

New-feature callout body text.

Success

Success callout body text.

Numbered sequence (steps)

  1. First step title

    Step body text with bold UI names.

  2. Step with screenshot placeholder

    Steps can hold images, lists, and callouts.

    Screenshot: Profile → Rate Cards tab
  3. Step with nested callout

    Final step body.

    Important

    Nested callout inside a step.

Standard lists

  1. Plain markdown-style numbered item
  2. Second item
  • Plain bulleted item
  • Second item

List with icons (feature rows)

  • Payment Amount

    Set your price and frequency — one-time or recurring.

  • Location

    Device location, ZIP code, or Remote.

Checklists

  • Connect your bank account before sharing your link
  • Write a service label under 100 characters
  • Don't use generic labels like "Hire me"

Comparison table

Instead of…Try this…
Hire meElectrician skilled at rewiring old homes
GardeningLandscaping & yardwork — weekly plans available

Quote

"One link replaced my whole booking flow."

— Maria G., housekeeper in Austin

Plain markdown-style blockquote for comparison.

Video

Video: caption text under the player

UI paths, keys & code

Go to Profile › Rate Cards › Add, then press ⌘ + C to copy.

https://www.myratecards.com/your-name

Condensed accordions (FAQ)

Paste the markup with no onclick — the layout script wires up any .faq-btn automatically.

Yes:

Suggested Prompt

"Write me 5 service labels under 100 characters."