Style Guide

Color Palette

#001535
$color-blue-1
#324F64
$color-blue-2
#7C9CAC
$color-blue-3
#ACC5D2
$color-blue-4
#DFEAEF
$color-blue-5
#E5F2F8
$color-blue-6
#001F4D
$color-blue-7
#000F26
$color-blue-8
#E84F35
$color-red-1
#E73D07
$color-red-2
#17171C
$color-black-1
#F3F5F9
$color-gray-1
#DFE8F8
$color-gray-2
#D4DCEC
$color-gray-3
#E6EBF4
$color-gray-4
#FAF2EA
$color-linen-1
#72B01D
$color-green-1
#3F7D20
$color-green-2

Typography

Inter / 3.25rem / 500 / 1.2 / #000F26 (h1, .h1)

Inter / 2.5rem / 500 / 1.4 / #000F26 (h2, .h2)

Inter / 2rem / 500 / 1.3 / #000F26 (h3, .h3)

Inter / 1.5rem / 500 / 1.3 / #000F26 (h4, .h4)

Inter / 1.25rem / 500 / 1.3 / #000F26 (h5, .h5)

Inter / 1.125rem / 500 / 1.8 / #324F64 (p, li)

Inter / 1.125rem / 500 / 1.8 / #E84F35 (a)

Inter / 1rem / 700 / 1.6 / #E84F35 (.header-subtitle)

max-width: 1199.98px

Inter / 2.5rem / 500 / 1.3 / #000F26 (h1, .h1)

Inter / 2rem / 500 / 1.4 / #000F26 (h2, .h2)

Inter / 1.5rem / 500 / 1.3/ #000F26 (h3, .h3)

Inter / 1.25rem / 500 / 1.3 / #000F26 (h4, .h4)

Inter / 1.125rem / 500 / 1.3 / #000F26 (h5, .h5)

Inter / 1rem / 500 / 1.6 / #324F64 (p, li)

Inter / 1rem / 500 / 1.6 / #E84F35 (a)

Inter / 0.875rem / 700 / 1.6 / #E84F35 (.header-subtitle)

max-width: 767.98px

Inter / 2rem / 500 / 1.3 / #000F26 (h1, .h1)

Inter / 1.5rem / 500 / 1.14/ #000F26 (h2, .h2)

Inter / 1.25rem / 500 / 1.3 / #000F26 (h3, .h3)

Inter / 1.125rem / 500 / 1.3 / #000F26 (h4, .h4)

Inter / 1rem / 500 / 1.3 / #000F26 (h5, .h5)

Inter / 1rem / 500 / 1.6 / #324F64 (p, li)

Inter / 1rem / 500 / 1.6 / #E84F35 (a)

Inter / 0.75rem / 700 / 1.6 / #E84F35 (.header-subtitle)

Icons

<i class="icon-*"></i>
.icon-terminal
.icon-settings
.icon-qr
.icon-pencil
.icon-p2p
.icon-online-meeting
.icon-user
.icon-document
.icon-docs
.icon-report
.icon-connection
.icon-close
.icon-chat
.icon-support
.icon-card
.icon-card-2
.icon-recurrent-1
.icon-holding
.icon-holding-money
.icon-return-payment
.icon-calendar
.icon-arrow-circle
.icon-round-arrows
.icon-help
.icon-shield
.icon-chart
.icon-bolt
.icon-tick
.icon-path
.icon-share
.icon-heart
.icon-charm_thumb-up
.icon-touch
.icon-attention
.icon-arrow-up
.icon-system
.icon-steps
.icon-business
.icon-bank
.icon-shop
.icon-notice
.icon-percent
.icon-charity
.icon-bot
.icon-viber
.icon-telegram
.icon-phone

List

  • List item 1
  • List item 1
  • List item 1

<ul>

  • List item 1
  • List item 1
  • List item 1

.list-dots

  1. List item 1
  2. List item 1
  3. List item 1

<ol>

Buttons

Red Button (.btn .btn-red)

<button class="btn btn-red"><span>Button</span></button>

.btn .btn-red

:hover

:active,
.active,
:focus

.disabled,
:disabled

White Button (.btn .btn-white)

<button class="btn btn-white"><span>Button</span></button>

.btn .btn-white

:hover

:active,
.active,
:focus

.disabled,
:disabled

Blue Button (.btn .btn-blue)

<button class="btn btn-blue"><span>Button</span></button>

.btn .btn-blue

:hover

:active,
.active,
:focus

.disabled,
:disabled

Red Button with arrow (.btn .btn-red .btn-arrow)

<button class="btn btn-red btn-arrow"><span>Button</span></button>

.btn .btn-red
.btn-arrow

:hover

:active,
.active,
:focus

.disabled,
:disabled

White Button with arrow (.btn .btn-white .btn-arrow)

<button class="btn btn-white btn-arrow"><span>Button</span></button>

.btn .btn-white
.btn-arrow

:hover

:active,
.active,
:focus

.disabled,
:disabled

Blue Button with arrow (.btn .btn-blue .btn-arrow)

<button class="btn btn-blue btn-arrow"><span>Button</span></button>

.btn .btn-blue
.btn-arrow

:hover

:active,
.active,
:focus

.disabled,
:disabled

Button small (.btn .btn-sm)

<button class="btn btn-red btn-sm"><span>Button</span></button>
<button class="btn btn-white btn-sm"><span>Button</span></button>
<button class="btn btn-blue btn-sm"><span>Button</span></button>

.btn .btn-red
.btn-sm

.btn .btn-white
.btn-sm

.btn .btn-blue
.btn-sm

.btn .btn-red
.btn-arrow .btn-sm

.btn .btn-white
.btn-arrow .btn-sm

.btn .btn-blue
.btn-arrow .btn-sm

Inputs

<div class="form-group">
 <input class="form-control">
 <label class="form-label"></label>
</div>

Input success

Input error

Incorrect email address
<div class="form-group has-error">
 <input class="form-control">
 <label class="form-label"></label>
 <div class="invalid-feedback"></div>
</div>

Textarea

Dropdown

Cards

Product card

Title

Description
Title

Description

Visa

Info card

Залиште заявку

Ми проконсультуємо з тарифів та можливостей для вас

Замовити підключення
Надійність

Знаючи, що таке Apple Pay та впровадивши на свій сайт, можна збільшити конверсію оплати до 90%

Modal

Open Modal

Accordion

Accordion Type 1

Що необхідно для співпраці?
Залишити заявку про співпрацю у нас на сайті. Наші представники зв’яжуться з вами, уточнять деталі, дадуть відповіді на всі Ваші запитання та передадуть запит в банк.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Type 2

Онлайн-інвойсинг
Створення для покупця персонального посилання на оплату. Після оплати або за заданий час інвойс стає неактивним. Це зручно для магазинів без власного веб-порталу (інстаграм-магазини, онлайн-чати)
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.