steps

pages/_docs/buttons.md

@@ -49,7 +49,7 @@ Make buttons look inactive to show that an action is possible once the user meet
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
 
-## Color variations
+## Colour variations
 
 Choose the right colour for your button to make it go well with your design and draw users' attention. Button colours can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
 

pages/_docs/steps.md

@@ -1,16 +1,17 @@
 ---
 title: Steps
 menu: docs.steps
+description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
 new: true
 ---
 
 
-
-Steps are progress indicators of a sequence of task steps.
-
-
 ## Default markup
 
+Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface. 
+
+Use the `steps` class to create the default progress tracker and name the steps accordingly.     
+
 {% capture code %}
 {% include ui/steps.html show-title=true %}
 {% endcapture %}
@@ -19,13 +20,17 @@ Steps are progress indicators of a sequence of task steps.
 
 ## Tooltips
 
+Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips will display when a user hovers over a given step and help clarify what might not be clear from the interface.
+
 {% capture code %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endcapture %}
 {% include example.html code=code %}
 
 
-## Color
+## Colour
+
+You can customise the default progress indicator by changing the colour to one that better suits your design. Click [here]({% docs_url colors %}) to see the range of available colours.
 
 {% capture code %}
 {% include ui/steps.html color="green" show-title=true %}
@@ -36,6 +41,8 @@ Steps are progress indicators of a sequence of task steps.
 
 ## Steps without title
 
+For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
+
 {% capture code %}
 {% include ui/steps.html show-tooltip=true %}
 {% endcapture %}
@@ -44,6 +51,8 @@ Steps are progress indicators of a sequence of task steps.
 
 ## Steps with numbers
 
+Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the colour to customise it.
+
 {% capture code %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
 {% endcapture %}