flags, payments, timeline

pages/_docs/flags.md

@@ -1,6 +1,7 @@
 ---
 title: Flags
 menu: docs.flags
+description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. 
 plugin: flags
 done: true
 ---
@@ -8,6 +9,8 @@ done: true
 
 ## Flag
 
+To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. The full list of countries can be found below. 
+
 {% capture code %}
 {% include ui/flag.html flag="tg" class="mr-1" %}
 {% include ui/flag.html flag="br" class="mr-1" %}
@@ -18,7 +21,7 @@ done: true
 
 ## Flag sizes
 
-Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
+Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
 
 {% capture code %}
 {% include ui/flag.html flag="pl" size="xl" class="mr-1" %}
@@ -31,7 +34,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
 
 ## Types
 
-To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
+To use the flag of a particular country, add the `flag-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-ad`.
 
 <table>
 {% for flag in site.data.flags %}

pages/_docs/payments.md

@@ -1,6 +1,7 @@
 ---
 title: Payments
 menu: docs.payments
+description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
 plugin: payments
 done: true
 ---
@@ -8,6 +9,8 @@ done: true
 
 ## Payment
 
+To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
+
 {% capture code %}
 {% include ui/payment.html class="mr-3" payment="shopify"%}
 {% include ui/payment.html class="mr-3" payment="visa" %}
@@ -18,7 +21,7 @@ done: true
 
 ## Payment sizes
 
-Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
+Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
 
 {% capture code %}
 {% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
@@ -31,6 +34,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
 
 ## Types
 
+Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.
+
 <table class="table-vcenter">
 {% for payment in site.data.payments %}
 <tr>

pages/_docs/timelines.md

@@ -1,18 +1,23 @@
 ---
 title: Timelines
+description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
 menu: docs.timelines
 ---
 
 
 ## Timeline
 
+The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.
+
 {% capture code %}
 {% include cards/timeline.html %}
 {% endcapture %}
 {% include example.html code=code %}
 
 
-## Simple Timeline
+## Simple timeline
+
+Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
 
 {% capture code %}
 {% include cards/timeline.html simple=true %}