tabs, spinners

pages/_docs/spinners.md

 ---
 title: Spinners
 menu: docs.spinners
+description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
 bootstrap-link: components/spinners/
 done: true
 ---
+loading state of a component
 
 
 ## Default markup
 
+Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion. 
+
 {% capture code %}
 {% include ui/spinner.html %}
 {% endcapture %}
@@ -16,6 +20,8 @@ done: true
 
 ## Colors
 
+Choose one of the available colors to customize the spinner and make it suit your design.
+
 {% capture code %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
@@ -27,6 +33,8 @@ done: true
 
 ## Size
 
+Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
+
 {% capture code %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
@@ -36,11 +44,15 @@ done: true
 
 ## Growing spinner
 
+Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state. 
+
 {% capture code %}
 {% include ui/spinner.html type="grow" %}
 {% endcapture %}
 {% include example.html code=code %}
 
+Growing spinners also come in a variety of colors to choose from.
+
 {% capture code %}
 {% for color in site.colors %}
 {% assign c = color[0] %}
@@ -52,6 +64,8 @@ done: true
 
 ## Buttons
 
+Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.  
+
 {% capture code %}
 {% include ui/button.html spinner=true text="Button" color="primary" %}
 {% include ui/button.html spinner=true text="Button" color="danger" %}

pages/_docs/tabs.md

 ---
 title: Tabs
 menu: docs.tabs
+description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organisation and make it easy for users to navigate.
 bootstrap-link: components/navs/
 ---
 
 
 ## Default markup
 
+Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
+
 {% capture code %}
 {% include cards/tabs.html id="ex1" %}
 {% endcapture %}
@@ -15,6 +18,8 @@ bootstrap-link: components/navs/
 
 ## Tabs with icons
 
+Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify. 
+
 {% capture code %}
 {% include cards/tabs.html icons=true settings=true id="ex2" %}
 {% endcapture %}
@@ -23,6 +28,8 @@ bootstrap-link: components/navs/
 
 ## Tabs only with icons
 
+Use tabs without label names to save space and make the tab content easy to recognize for international users. 
+
 {% capture code %}
 {% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
 {% endcapture %}
@@ -31,6 +38,8 @@ bootstrap-link: components/navs/
 
 ## Tabs with dropdown
 
+Make one or more of your tabs into a dropdown to add more options within one element. 
+
 {% capture code %}
 {% include cards/tabs.html dropdown=true id="ex4" %}
 {% endcapture %}
@@ -39,6 +48,8 @@ bootstrap-link: components/navs/
 
 ## Full-width tabs
 
+Add the `nav-fill` class to make the tabs take up the full space of the parent element.
+
 {% capture code %}
 {% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
 {% endcapture %}
@@ -47,6 +58,8 @@ bootstrap-link: components/navs/
 
 ## Alternate style
 
+Use the `nav-tabs-alt` class to make the labels display in capital letters.
+
 {% capture code %}
 {% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
 {% endcapture %}