Style Guide
Используется rem — лучше для масштабирования и доступности.
1rem = 16px
(браузер по умолчанию)
Headlines
heading-1
Lorem ipsum dolor sit amet, adipis elit.
heading-2
Lorem ipsum dolor sit amet, adipis elit.
heading-3
Lorem ipsum dolor sit amet, adipis elit.
heading-4
Lorem ipsum dolor sit amet, adipis elit.
heading-5
Lorem ipsum dolor sit amet, adipis elit.
heading-6
Lorem ipsum dolor sit amet, adipis elit.
Paragraphs
p-xlarge
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
p-large
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
p-medium
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
p-small
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
p-xsmall
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
Lorem ipsum dolor sit amet, consectur adipis elit. Suspendisse varius enim in eros element tristique dolor sit amet tristique varius odor
Typography helper classes
txt-medium
Makes the text medium
txt-bold
Makes the text bold
txt-italic
Makes the text italic
txt-lowercase
lowercase all letters
txt-allcaps
Capitalizes all letters
txt-underlined
Makes the text underlined
txt-crossed
Makes the text crossed
Button
btn-prm
Primary
btn-sec
Secondary
btn-additionally
Additionally
btn-outline
Outline button
btn-outline-prm
Outline button
btn-icon-prm
btn-icon-out
Corn
ui-corn-10
ui-corn-12
ui-corn-circle
Card padding
card-pad-30
card-pad-40
State colors
st-cl-error
Error
st-cl-success
Success
Form
form-title
Form title
form-field-label
Input label text:
form-input
Это поле обязательно для заполнения
form-error-message
Input error message
form-text-area
Text area:
This field required
form-select
Select:
Option 1
Option 2
Option 3
This field required
form-upload-file-btn
File upload
file-name.doc
9 mb
file-name.doc
9 mb
Select file
This field required
Радиогруппа:
Radio item label one
Radio item label two
This field required
Checkbox:
Checkbox item label
Checkbox item label checked
This field required
Agreement:
Text
I agree to the processing of my
personal data
This field required
form-btn
Send button
form-input-group-reset-margins
Спасибо! Форма отправлена
Что-то не так. Попробуйте позже
Заголовок формы
Имя:
This field required
Телефон:
This field required
E-mail:
This field required
Комментарий:
This field required
Дата:
This field required
Выпадающий список:
Вариант 1
Вариант 2
Вариант 3
This field required
Количество:
This field required
Радиогруппа:
Вариант 1
Вариант 2
This field required
Список с галочками:
Вариант 1
Вариант 2
This field required
Загрузка файлa
file-name.doc
9 mb
file-name.doc
9 mb
Выбрать файл
This field required
Галочка:
Text
Я согласен на обработку моих
персональных данных
This field required
Отправить
Спасибо!
Мы свяжемся с Вами в ближайшее время!
Something wrong. Try again later
Grids
Desktop -
12 columns
Tablet -
8 columns
Mobile -
4 columns
grid-2-columns
grid-3-columns
grid-4-columns
grid-6-columns
Containers
containers-site
containers site
containers-block
containers block
containers-block-pad
containers block padding