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

Определенную и гибкую основную структуру мы можем использовать на всех или большинстве страниц.

page-wrapper
main-wrapper
padding-global
padding-section-xsmall
padding-section-small
padding-section-medium
padding-section-large
padding-section-xlarge
padding-section-xxlarge
padding-block-small
padding-block-medium
padding-block-large
padding-block-xlarge
padding-block-xxlarge
grid_col-padding-horizontal
Для блоков с декоративной сеткой (grid4--decor)
grid_col-padding-left
Для блоков с декоративной сеткой (grid4--decor)
grid_col--padding-right
Для блоков с декоративной сеткой (grid4--decor)
grid-4
grid-gap
grid-4
grid-4--decor
grid-gap
grid-3
grid-gap
grid-2
grid-gap
flex-direction-horizontal
flex-direction-vertical
flex-direction-horizontal
flex-center
flex-direction-vertical
flex-center
flex-direction-horizontal
flex-align-end
flex-direction-vertical
flex-align-end
flex-direction-horizontal
space-between
flex-direction-vertical
space-between
flex-center-all

Заголовки

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

heading-style-h1

Надежные лазерные станки для гравировки и маркировки

heading-style-h2

Ювента — прецизионные лазерные технологии

heading-style-h3
Волоконный лазерный маркер Mark&Clean
heading-style-h4

О компании

heading-style-h5
Технические характеристики
heading-style-h6
Навигация

текст

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

text-style-body

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-style-caption

Ювента — прецизионные лазерные технологии

Текстовые стили

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

text-align-center

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-no-wrap
Запрет переноса

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-eclipse
Ограничение в 2 строки

Приглашаем Вас посетить международную выставку Фотоника. Мир лазеров и оптики с 28 марта по 31 марта 2023 года в Экспоцентре в Москве. В этом году мы представим большое количество различных станков для лазерной гравировки и маркировки. Сможем подобрать режимы и изготовить тестовые образцы для ваших задач прямо на выставке.

Наши специалисты ответят на все интересующие Вас вопросы. Подберем оптимальное оборудование для решения Ваших технологических задач. Приходите! Ждем Вас!

Кнопки

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

button-large_component
text-color-white
border-radius
Вложенный слой >
background-brand
button-large="blur"
Атрибут для состояния наведения
Text
button-large_component
text-color-white
border-radius
Вложенный слой >
background-blur
button-large="blur"
Атрибут для состояния наведения
Text
button-large_component
border-radius
Вложенный слой >
background-white
button-large="light-alt-hover"
Атрибут для состояния наведения, если цвет фона  #f7f7f7
Text
button-large_component
border-radius
Вложенный слой >
background-light-grey
Text
button-medium_component
text-color-white
border-radius
background-blur
Используется в header_component
button-medium="blur"
Атрибут для состояния наведения
Тест
Text
button-medium_component
border-radius
background-white
Используется в header_component
В связки с header-light-theme у родителя, стили переназначаются в css коде
Тест
Text
button-iconic_component
text-color-brand
border-radius
background-white
button-iconic_component
text-color-brand
border-radius
background-light-grey
button-iconic_component
button-iconic_size-small
text-color-brand
border-radius
background-light-grey
button-iconic_component
button-iconic_rounded
text-color-white
background-light-grey
button-iconic_component
text-color-white
border-radius
background-blur
pointer-events-none
Декоративная кнопка
slider-buttons_component

Ссылки

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

text-style-body
[rolling-link]
Используется в header_component
rollink-link
Атрибут для состояния наведения
Текст
text-style-body
link-text-black__hover
Текст
text-style-body
text-color-grey
link-text-grey__hover
Смотреть благодарственное письмо
link_component
text-color-brand

цвета

Управление повторяющимися цветами текста и фона.

Для текста

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

text-color-black

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-grey

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-grey-tablet
Перекрашиывает на планшете и ниже

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-grey-mobile
Перекрашиывает на телефоне

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-white-opacity

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-white

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-brand

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

text-color-error

Компания «Ювента» осуществляет полный комплекс услуг, связанный с поставкой, установкой и запуском станков для вашего производства.

Для фона

Используйте классы заголовков, если стиль оформления не соответствует HTML-тегу по умолчанию.

background-white
Перекрашиывает на планшете и ниже
background-light-grey
Перекрашиывает на планшете и ниже
background-blur
Перекрашиывает на планшете и ниже
background-brand
Перекрашиывает на планшете и ниже
background-brand при наведении
Перекрашиывает на планшете и ниже
background-gradient-blue
Перекрашиывает на планшете и ниже
background-overlay
Перекрашиывает на планшете и ниже

Бордеры

Управление повторяющимися цветами текста и фона.

border-all
border-right
border-left
border-top
border-bottom
border-radius

позиционирование

Управление повторяющимися цветами текста и фона.

absolute
Перекрашиывает на планшете и ниже
relative
Перекрашиывает на планшете и ниже
sticky
Перекрашиывает на планшете и ниже
layer-center
Перекрашиывает на планшете и ниже
layer-left
Перекрашиывает на планшете и ниже
layer-bottom
Перекрашиывает на планшете и ниже

Размеры

Управление повторяющимися цветами текста и фона.

size-full-screen
Перекрашиывает на планшете и ниже
size-full-percentage
Перекрашиывает на планшете и ниже
size-height-auto
Перекрашиывает на планшете и ниже
size-height-auto-tablet
Перебивает высоту на планшете и ниже
size-height-full
Перекрашиывает на планшете и ниже
size-width-auto
Перекрашиывает на планшете и ниже
size-width-full
Перекрашиывает на планшете и ниже

Отображение

Управление повторяющимися цветами текста и фона.

show-on-mobile
Перекрашиывает на планшете и ниже
show-on-tablet
Перекрашиывает на планшете и ниже
show-on-desktop
Перекрашиывает на планшете и ниже
hide-on-mobile
Перекрашиывает на планшете и ниже
hide-on-tablet
Перекрашиывает на планшете и ниже
hidden
Перекрашиывает на планшете и ниже

Другие глобальные классы

Управление повторяющимися цветами текста и фона.

clip-content
Перекрашиывает на планшете и ниже
pointer-events-none
Перекрашиывает на планшете и ниже
color-inherit
Перекрашиывает на планшете и ниже

Хедер

Управление повторяющимися цветами текста и фона.

header_component
Перекрашиывает на планшете и ниже
header_component
Перекрашиывает на планшете и ниже
Для светлой темы компонент оборачивается в header-light-theme
Стили переназначаются в css коде

Иконки

Управление повторяющимися цветами текста и фона.

icon_component
Вставляется код svg
В svg коде в атрибуте fill пишется currentColor
Цвет иконки задается цветом текста
Оставить заявку
Ответим в течение 15 минут, подготовим КП за 1 час