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
plugin:flags
done:true
done:true
---
---
...
@@ -8,6 +9,8 @@ done: true
...
@@ -8,6 +9,8 @@ done: true
## Flag
## 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 %}
{% capture code %}
{% include ui/flag.html flag="tg" class="mr-1" %}
{% include ui/flag.html flag="tg" class="mr-1" %}
{% include ui/flag.html flag="br" class="mr-1" %}
{% include ui/flag.html flag="br" class="mr-1" %}
...
@@ -18,7 +21,7 @@ done: true
...
@@ -18,7 +21,7 @@ done: true
## Flag sizes
## 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 %}
{% capture code %}
{% include ui/flag.html flag="pl" size="xl" class="mr-1" %}
{% 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
...
@@ -31,7 +34,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
## Types
## 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`.
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
plugin:payments
done:true
done:true
---
---
...
@@ -8,6 +9,8 @@ done: true
...
@@ -8,6 +9,8 @@ done: true
## Payment
## 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 %}
{% capture code %}
{% include ui/payment.html class="mr-3" payment="shopify"%}
{% include ui/payment.html class="mr-3" payment="shopify"%}
{% include ui/payment.html class="mr-3" payment="visa" %}
{% include ui/payment.html class="mr-3" payment="visa" %}
...
@@ -18,7 +21,7 @@ done: true
...
@@ -18,7 +21,7 @@ done: true
## Payment sizes
## 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 %}
{% capture code %}
{% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
{% 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,
...
@@ -31,6 +34,8 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
## Types
## 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.
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
menu:docs.timelines
---
---
## Timeline
## 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 %}
{% capture code %}
{% include cards/timeline.html %}
{% include cards/timeline.html %}
{% endcapture %}
{% endcapture %}
{% include example.html code=code %}
{% 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.