Стилі заголовків

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

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

heading-style-h2

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

heading-style-h3

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

heading-style-h4

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

heading-style-h5

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

heading-style-h6

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

Текстові класи

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

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

text-size-large
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-size-medium
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-size-regular
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-size-small
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-size-tiny
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.

Стилі тексту

text-style-striking-through
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-italic
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-muted
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-allcaps
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-nowrap
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-link
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-quote
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-2lines
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.
text-style-3lines
Це блок тексту. Двічі клацніть цей текст, щоб відредагувати його.

Вага тексту

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

Кнопки

Система класів комбінацій кнопок.
кнопка
є-маленький
Текст кнопки
кнопка
is-large
Текст кнопки
кнопка
is-text
Текст кнопки
кнопка
є-маленький
Текст кнопки
кнопка
is-large
Текст кнопки
кнопка
is-text-white
Текст кнопки
кнопка
is-secondary
Текст кнопки
кнопка
is-secondary
є-маленький
Текст кнопки
кнопка
is-secondary
is-large
Текст кнопки
кнопка
is-icon
Текст кнопки
кнопка
is-icon
is-secondary
Текст кнопки
кнопка
is-icon
is-text
Текст кнопки
кнопка
is-secondary
Текст кнопки
кнопка
is-secondary
є-маленький
Текст кнопки
кнопка
is-secondary
is-large
Текст кнопки
кнопка
is-icon
Текст кнопки
кнопка
is-icon
is-secondary
Текст кнопки
кнопка
is-icon
is-text
Текст кнопки

Кольори

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

Палітра кольорів

#00000
#f5f5
#fffff

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

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white

Кольори фону

background-color-black
background-color-grey
background-color-white

Значки

Уніфікувати розміри іконок. висота іконки задає висоту іконок. icon-1x1 задає висоту та ширину іконок.
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-xxlarge

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

Використовуйте властивість 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-global
padding-section-small
padding-section-medium
padding-section-large
група кнопок

Набивки

Система інтервалів утиліт - класи відступів. [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
padding-medium
padding-large
padding-xlarge
padding-xxlarge
величезна набивка
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Маржинальність

Система інтервалів - класи полів. [margin-direction] + [margin-size].

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

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Розмірні класи

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
величезна маржа
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Корисні інженерні системи

Утилітарні класи ми любимо використовувати в більшості наших проектів, щоб швидше збирати.
ховатися
Цей елемент приховано
приховати табличку
сховати-мобільний-портрет
сховати-мобільний-ландшафт
переповнення видиме
overflow-hidden
overflow-auto
переповнення-прокрутка
pointer-events-on
pointer-events-off
шар
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
стрілка вправо