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>