Steps

Updated on

Steps are a great way to guide your users through a series of actions or events. You can include as many steps as needed to fit your process.


1

Choose your coffee beans

Pick the beans that suit your taste. Whether you like a strong dark roast or a light fruity blend, this is where the magic begins.

2

Measure out your coffee

Use a tablespoon to measure out the right amount of coffee. Here's a quick guide:

  • 1 tablespoon for a single cup
  • 2 tablespoons if you need that extra kick
  • A little more if it's going to be one of those days
3

Heat your water

Heat water to just before boiling. If you're using a kettle, this is the perfect time to zone out and daydream about your coffee.
4

Brew and enjoy

Now, pour the hot water over the coffee grounds and let it brew. Take in the aroma as it fills the room. Wait a few minutes, pour yourself a cup, and enjoy that first sip like it's the best moment of the day — because it is!

Sample code below,

<Steps>
  <Step title="Choose your coffee beans" number="1">
    Pick the beans that suit your taste. Whether you like a strong dark roast or a light fruity blend, this is where the magic begins.
  </Step>  
  <Step title="Measure out your coffee" number="2">
    Use a tablespoon to measure out the right amount of coffee. Here's a quick guide:
    * 1 tablespoon for a single cup
    * 2 tablespoons if you need that extra kick
    * A little more if it's going to be one of those days
  </Step>
  <Step title="Heat your water" number="3">
    Heat water to just before boiling. If you're using a kettle, this is the perfect time to zone out and daydream about your coffee.
  </Step>
  <Step title="Brew and enjoy" number="4">
    Now, pour the hot water over the coffee grounds and let it brew. Take in the aroma as it fills the room. Wait a few minutes, pour yourself a cup, and enjoy that first sip like it's the best moment of the day—because it is!
  </Step>
</Steps>