From a58ba1ea252c8a959d74e425cc548629c0945b3c Mon Sep 17 00:00:00 2001 From: Martyna Date: Mon, 16 Mar 2020 20:45:02 +0100 Subject: [PATCH] flags, payments, timeline --- pages/_docs/flags.md | 7 +++++-- pages/_docs/payments.md | 7 ++++++- pages/_docs/timelines.md | 7 ++++++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 50f2be7e..5a8b32d4 100644 --- a/pages/_docs/flags.md +++ b/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`. {% for flag in site.data.flags %} diff --git a/pages/_docs/payments.md b/pages/_docs/payments.md index 1ada689c..d31749da 100644 --- a/pages/_docs/payments.md +++ b/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. +
{% for payment in site.data.payments %} diff --git a/pages/_docs/timelines.md b/pages/_docs/timelines.md index 7fd650ef..4f94df93 100644 --- a/pages/_docs/timelines.md +++ b/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 %} -- GitLab