Projecty — шаблон Webflow для SaaS-сайтів

Посібник зі стилів

Класи структури

Чітка та гнучка базова структура, яку можна використовувати на більшості або на всіх сторінках.

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group

Заголовки

Теги HTML визначають стандартні стилі заголовків. Використовуйте класи заголовків, якщо стиль типографіки не збігається зі стандартним тегом HTML.

H1

Зразок тексту допоможе вам зрозуміти, як виглядатиме реальний контент. Цей текст використовується як заповнювач.

heading-style-h1

Зразок тексту допоможе вам зрозуміти, як виглядатиме реальний контент. Цей текст використовується як заповнювач.

H2

Цей текст використовується як заповнювач. Зразок тексту допоможе вам зрозуміти, як виглядатиме реальний контент.

heading-style-h2

Цей текст використовується як заповнювач. Зразок тексту допоможе вам зрозуміти, як виглядатиме реальний контент.

H3

Зразок тексту допоможе вам зрозуміти, як реальний текст виглядатиме на вашому сайті. Цей текст використовується як заповнювач замість основного контенту.

heading-style-h3

Зразок тексту допоможе вам зрозуміти, як реальний текст виглядатиме на вашому сайті. Цей текст використовується як заповнювач замість основного контенту.

H4

Цей текст використовується як заповнювач. Він допомагає зрозуміти, як виглядатиме готовий контент. Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується.

heading-style-h4

Цей текст використовується як заповнювач. Він допомагає зрозуміти, як виглядатиме готовий контент. Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується.

H5
Цей текст використовується як заповнювач. Він допомагає зрозуміти, як виглядатиме готовий контент. Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме готовий контент.
heading-style-h5
Цей текст використовується як заповнювач. Він допомагає зрозуміти, як виглядатиме готовий контент. Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме готовий контент.
H6
Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме готовий контент. Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме готовий контент.
heading-style-h6
Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме готовий контент. Цей текст використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме готовий контент.

Елементи Webflow

Рідні елементи Webflow із застосованими класами Client-First.

form_component

Приклад компонента форми з використанням папок

Дякуємо! Вашу відповідь отримано!
Ой! Під час надсилання форми сталася помилка.
ДЛЯ СТАТЕЙ

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Цей зразок тексту з посиланням використовується як заповнювач замість реального тексту, який зазвичай тут розміщується. Зразок тексту допомагає зрозуміти, як реальний текст виглядатиме на вашому сайті. Цей зразок тексту використовується як заповнювач замість реального тексту. Цей зразок тексту використовується як заповнювач замість реального тексту. Цей зразок тексту використовується як заповнювач замість реального тексту.

  • Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  • Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  • Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  1. Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  2. Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  3. Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується. Зразок тексту допомагає зрозуміти, як реальний текст виглядатиме на вашому сайті. Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
Тип
ПОСЛУГИ

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Цей зразок тексту з посиланням використовується як заповнювач замість реального тексту, який зазвичай тут розміщується. Зразок тексту допомагає зрозуміти, як реальний текст виглядатиме на вашому сайті. Цей зразок тексту використовується як заповнювач замість реального тексту. Цей зразок тексту використовується як заповнювач замість реального тексту. Цей зразок тексту використовується як заповнювач замість реального тексту.

  • Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  • Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  • Цей зразок тексту використовується як заповнювач замість реального тексту, який зазвичай тут розміщується.
  1. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  2. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  3. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме справжній текст на вашому сайті. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
Тип
ПІДСЛУЖИ

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Текст із посиланням, що використовується як заповнювач для реального контенту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме справжній текст на вашому сайті. Цей текст використовується як заповнювач для реального контенту. Цей текст використовується як заповнювач для реального контенту. Цей текст використовується як заповнювач для реального контенту.

  • Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  • Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  • Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  1. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  2. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
  3. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується. Він допомагає зрозуміти, як виглядатиме справжній текст на вашому сайті. Цей текст використовується як заповнювач для реального контенту, який зазвичай тут розміщується.
Тип
Що таке дизайн цифрових продуктів?

Дизайн цифрових продуктів — це дисципліна, що формує зовнішній вигляд, поведінку та місце програмного продукту в повсякденному житті користувача. Вона поєднує стратегію продукту, дослідження користувачів, інтерактивний дизайн, UI-дизайн та системне мислення в єдиний робочий процес. Завдяки цьому кожен екран, стан і шлях користувача спрямовані на досягнення бізнес-результатів: активацію, утримання, конверсію або прибуток. Це не просто візуальне оформлення списку функцій, а структурна робота, від якої залежить, чи будуть користуватися продуктом.

Інші HTML-теги

HTML-теги визначають стандартні стилі тексту.

Усі абзаци

Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Зразок тексту допомагає зрозуміти, як реальний текст виглядатиме на вашому сайті. Цей зразок тексту використовується як заповнювач для реального тексту.

Усі посилання
Усі посилання
Усі цитати
Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується. Зразок тексту допомагає зрозуміти, як реальний текст виглядатиме на вашому сайті.
Усі впорядковані списки
  1. Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується.
  2. Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується.
  3. Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується.
Усі невпорядковані списки
  • Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується.
  • Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується.
  • Цей зразок тексту використовується як заповнювач для реального тексту, який зазвичай тут розміщується.

Класи тексту

Класи тексту для випадків, коли типографічний стиль не збігається зі стандартним тегом HTML.

Розміри тексту

розмір тексту — великий

Цей зразок тексту використовується як заповнювач для реального контенту.

розмір тексту — середній

Цей зразок тексту використовується як заповнювач для реального контенту, який зазвичай розміщується на вашому сайті.

розмір тексту — звичайний

Цей зразок тексту використовується як заповнювач для реального контенту. Він допомагає зрозуміти, як виглядатиме справжній текст на вашому сайті.

розмір тексту — малий

Цей зразок тексту використовується як заповнювач для реального контенту, який зазвичай розміщується на вашому сайті. Він допомагає зрозуміти, як виглядатиме справжній текст на сторінці.

розмір тексту — дуже малий

Цей зразок тексту використовується як заповнювач для реального контенту, який зазвичай розміщується на вашому сайті. Він допомагає зрозуміти, як виглядатиме справжній текст на сторінці.

Стилі тексту

стиль тексту — закреслений

стиль тексту — закреслений

стиль тексту — курсив

стиль тексту — курсив

стиль тексту — приглушений

стиль тексту — приглушений

стиль тексту — всі великі літери

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Це зразок тексту, який використовується як заповнювач.

text-style-2lines
Цей стиль CSS не підтримується для форматованого тексту в iOS.

Це зразок тексту, який використовується як заповнювач замість реального контенту. Він допомагає зрозуміти, як текст виглядатиме на вашому сайті. Це зразок тексту, який використовується як заповнювач замість реального контенту text-style-2lines

text-style-3lines
Цей стиль CSS не підтримується для форматованого тексту в iOS.

Це зразок тексту, який використовується як заповнювач замість реального контенту. Він допомагає зрозуміти, як текст виглядатиме на вашому сайті. Це зразок тексту, який використовується як заповнювач замість реального контенту. Це зразок тексту, який використовується як заповнювач замість реального контенту. Він допомагає зрозуміти, як текст виглядатиме на вашому сайті. Це зразок тексту, який використовується як заповнювач замість реального контенту.

Насиченість тексту

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Вирівнювання тексту

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Кнопки

Система комбінованих класів кнопок.

button
Текст кнопки
Текст кнопки
button
is-small
Текст кнопки
button
is-large
Текст кнопки
button
is-secondary
Текст кнопки
button
is-text
Текст кнопки
button
is-icon
Текст кнопки

Кольори

Керуйте кольорами тексту та фону, що повторюються.

Кольори тексту

text-color-dark
text-color-dark
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-tertiary
text-color-tertiary
text-color-alternate
text-color-alternate

Кольори фону

background-color-grey
background-color-primary
background-color-white
background-color-black
background-color-dark-grey

Максимальна ширина

Використовуйте властивість CSS max-width, щоб обмежити ширину внутрішнього вмісту.

max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Відступи (padding)

Система допоміжних відступів — класи padding. [padding-direction] + [padding-size].

Класи напрямків

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Класи розмірів

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
внутрішній-відступ-середній
внутрішній-відступ-великий
внутрішній-відступ-дуже-великий-1
внутрішній-відступ-дуже-великий-2
внутрішній-відступ-великий
внутрішній-відступ-дуже-великий
внутрішній-відступ-дуже-дуже-великий
внутрішній-відступ-користувацький1
внутрішній-відступ-користувацький2
внутрішній-відступ-користувацький3

Зовнішні відступи

Система допоміжних відступів - класи внутрішніх відступів (padding). [margin-direction] + [margin-size].

Класи напрямку

відступ-знизу
відступ-зверху
відступ-вертикальний
відступ-горизонтальний
відступ-ліворуч
відступ-праворуч

Класи розмірів

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Відступи

Уніфікована система відступів для проєкту.

spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge

Іконки

Уніфікація розмірів іконок. icon-height задає висоту іконок. icon-1x1 задає і висоту, і ширину іконок.

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Корисні утилітарні системи

Утилітарні класи, які ми використовуємо в більшості наших проєктів для пришвидшення розробки.

приховати
Цей елемент приховано
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Заголовок 6
Цитата

Нумерований список

  1. Елемент 1
  2. Елемент 2
  3. Елемент 3

Маркований список

Текстове посилання

Жирний текст

Курсив

Верхній індекс

Нижній індекс