РЖД Награды

Мы меняемся для вас

Типографика

Оформление текста

Обычный шрифт

Акцентный шрифт

Заголовки

Заголовок первого уровня

Заголовок второго уровня

Заголовок четвертого уровня

Заголовок карточки


Специальные теги для оформления текста
small

strong

abbr

blockquote
Классы - модификаторы для управления цветом текста

.text-white

.text-grey

.text-more-grey

.text-black

.text-red

Классы - модификаторы для управления размером текста

.text-small

.text-plus

.text-downsized

.text-upsized

.text-minus

.text-big

.text-huge

Классы - модификаторы для управления положением текста

.text-right

.text-center

Классы - модификаторы для управления оформлением текста

.top-border

.uppercase

.text-no-transform

.text-capitalize

.nowrap

Основные цвета

#e21a1a
#c31b1c
#1f1f24
#464a53
#767d89
#a9aeba
#e9eaed
#f3f3f3
#f9f9f9
#ffffff

Иконки

Мы используем svg-прайт. Для использования иконки в проекте применяем конструкцию из примера, меняя id на нужный. Размеры и цвета можем задавать атрибутами или в css.

Кнопки

Внешний вид
Описание
.btn-primary, .btn-red, .btn-default
Дизайн основной кнопки
.btn-secondary, .btn-grey
Дизайн альтернативной кнопки
.btn-transparent
Дизайн альтернативной кнопки
.btn-text, .red-button-link
Дизайн альтернативной кнопки
.btn-online
Дизайн альтернативной кнопки
.btn-icon
Дизайн кнопки в виде иконки (иконка может быть любой svg)

Ссылки

Внешний вид
Описание
Ссылка
.redlink
Cсылка
.regularlink
Ссылка
.graylink
Ссылка
.card-link.card-link_back
Ссылка[PDF, 206.8 кБ]
.graylink.file-download-link
PDF
.file-download-link

Ссылка

docx, 31 кБ
.display-files__link

Прелоадер

Создается добавлением блоку/кнопке класса .spinable.
Приспосабливается под стили кнопки, если класс вешать на нее.
Стили включены в основную тему. Класс можно добавлять/убирать по событию

 

Тултип

Мелкий белый текст (с поддержкой форматирования) на темно-сером фоне в цветах стайлгайда РЖД.

Классический контрол для открытия подсказки – круглый серый (краснеющий при взаимодействии) блок со знаком вопроса. При наведении или фокусировке на вопросике плавно проявляется текст (и плавно исчезает при потере фокуса или уходе мыши).

Ссылки в таком блоке отображаются цветом основного текста (в версии не для слабовидящих – белым) и с подчёркиванием.

Для компенсации ухода за край вьюпорта на узких экранах предусмотрен специальный скрипт.

Типичный вариант:

Поиск по «Изучение спроса» - объекты недвижимости, которые ОАО «РЖД» планирует продать/сдать в аренду/субаренду , но в настоящее время торги по ним не проводятся
«Назначенные торги» - объекты недвижимости, по которым ОАО «РЖД» в настоящее время проводит торги



Кастомный вариант на ссылке:

Нажмите для поиска информации «Изучение спроса» - объекты недвижимости, которые ОАО «РЖД» планирует продать/сдать в аренду/субаренду
«Назначенные торги» - объекты недвижимости, по которым ОАО «РЖД» в настоящее время проводит торги

Список тэгов

Список кликабельных тэгов

Дата и время

Используется шаблон date_time, который лежит в block-page/i-block-page.xsl
Шаблон принимает параметры, которые позволяют выводить только дату или дату и время
04.04.2024   14:38

Графика

При вставке графических материалов (фоторепортажи, слайдеры, картинки) нужно учитывать единую высоту контейнера для декстопа и плашета
Десктоп: 842px
Планшет: 442px

Принудительная разбивка по разделителям

Класс .separable служит признаком элемента, который скрипт темы РЖД будет разбивать по последовательности, указанной в атрибуте data-symbol (по умолчанию - /). Требуется для строк, в которых разделителями должны являться символы, которые браузеры таковыми не считают. Принудительное разделение осуществляется за счет обрамление разделителя «волосяными» пробелами.

30466/ОАЭ-АО «Компания ТрансТелеКом»/2021/Д

Ограничение блока по числу строк

Класс .truncated служит для визуального отсечения строк: показывается 5, остальное не отображается, к последнему помещающемуся на 5-ю строку слову добавляется многоточие.

Открытое акционерное общество «Российские железные дороги» в лице филиала «Октябрьская железная дорога», проводит аукцион №4146/ОАЭ-ОКТ/21 по продаже принадлежащих ОАО «РЖД» на праве собственности следующих объектов недвижимого имущества: Здания дома связи с кадастровым номером 10:16:0000000:2722, площадью 318,7 кв. метра, расположенного по адресу: Республика Карелия, Суоярвский район, ст. Суоярви-1, улица Октябрьская, дом 18 и относящегося к нему земельного участка с кадастровым номером 10:16:0010303:4 (категория земель – земли поселений, вид разрешенного использования – для эксплуатации здания Дома связи), площадью 1 233 кв.м., расположенного по адресу, установленному относительно ориентира, расположенного в границах участка, ориентир - Дом связи, почтовый адрес ориентира: Республика Карелия, г. Суоярви, улица Октябрьская, дом 18

Форма ввода пользовательских данных

Общие характеристики формы как БЭМ-блока:

  • Форма .form имеет опциональную шапку .form__head (с заголовком .form__heading и кнопкой сворачивания/разворачивания) и обертку для переключения видимости всего остального (далее - "тело" .form__body) при нажатии на эту кнопку.
  • Тело содержит контейнер групп .form__groups и подвал формы .form__footer (для кнопки Отправить, Очистить, а также ссылок на подписку и т.п.).
  • Группа .form_group - это элемент формы (текстовое поле, выпадающий список, мультивыбор, флажок, радиокнопки) с подписями и в ряде случаев с сообщениями валидации, взаимосвязанные единообразно в соответствии с дизайном.

Модификаторы:

  • .form_search - добавляется к поисковой форме (так как различия между поисковыми и непоисковыми формами минимальны в плане стилизации, .form - универсальный блок)
  • .form_narrow-desktop - добавляется при необходимости в десктопном режиме расположить форму в узкой колонке (https://company.rzd.ru/ru/9349). Не влияет на мобильную и планшетную версии, а в десктопной располагает все группы независимо от их модификаторов в ширину колонки, а также распределяет по ширине колонки кнопки в подвале формы, если их две.

Контейнер групп полей

.form__groups > .form__groups-inner

  • При наличии шапки формы группы с подвалом оборачиваются в .form__body, который отвечает за корректный отступ первой группы относительно заголовка.
  • Если хоть на каком-то из брейкпоинтов группы полей расположены по нескольку на строку (почти всегда), требуется внутренний контейнер .form__groups-inner, который:
    • На мобильной ширине устанавливает все группы в одну колонку.
    • На планшетной становится флекс-контейнером и располагает все формы (кроме специально помеченных БЭМ-модификатором или БЭМ-миксом) в ряды по двое с одинаковой шириной групп (тянется) и расстоянием между ними в 16px.
    • На десктопной ширине форм в ряду становится по умолчанию 4, но в зависимости от содержимого полей модификаторами можно менять соотношение ширин; горизонтальный отступ между группами сохраняется.

Модификаторы:

  • .form__groups_valign_top - отвечает за вертикальное выравнивание содержимого групп (внутри .form__groups-inner) по верхнему краю (по умолчанию - по нижнему из-за вариабельного количества строк в подписях при разной ширине экрана)
  • .form__groups_float_right - отвечает за горизонтальное выравнивание содержимого групп (внутри .form__groups-inner) по правому краю (по умолчанию - по левому)
  • .form__group_full-tablet 100% на планшете
  • .form__group_full 100% на планшете и десктопе
  • .form__group_half двойная ширина на десктопе
  • .form__group_subtotal тройная ширина на десктопе
  • .form__group_checks ледует использовать только тогда, когда в контроле на самом деле несколько элементов выбора! Для одиночного элемента использование этого модификатора приводит к неверному определению ширины в IE, так как эта группировка предполагает автоширину для каждого из check'ов, а одиночный всегда имеет ширину 100%.

Пример работы:

Нам понадобятся:

  • Скрипты: /st/js/common/file-chooser.js, /st/js/common/post-message.js, /st/js/common/captcha-on-demand.js
  • Стили для точки сборки: front/web/css/adaptive/src/common/select.less, front/web/css/adaptive/src/common/modal.less, front/web/css/adaptive/src/common/multiselect.less, front/web/css/adaptive/src/common/datefields.less, front/web/css/adaptive/src/common/slider-range.less, front/web/css/adaptive/src/common/file-chooser.less, front/web/css/adaptive/src/common/post-message.less.
  • Стили, включенные в тему: front/web/css/adaptive/src/theme/form.less

Поисковая форма

Поисковая форма может содержать заголовок, неактивный текст "Поиск"

Однако этот заголовок может отсутствовать:

  • если форма является составной частью страницы с названием раздела навигации "Поиск" (как у глобального поиска)

при отсутствии заголовка просто не добавляется эта разметка

Пример работы:

Нам понадобятся:

  • Пример реализации в шаблоне: front/app/ucm/templates/xslt/promo/promoForm.xsl
  • Стили, включенные в тему: front/web/css/adaptive/src/theme/form.less

Форма-фильтр с одним контролом

Нам понадобятся:

  • Скрипт: front/web/js/common/one-filter.js (для сабмита по переключению опций селекта, если кнопка не отображается).
  • Стили для точки сборки: front/web/css/adaptive/src/common/one-filter.less.

Модификатор .one-filter_no-btn (убирает кнопку и делает сабмит по переключению опций селекта)

Чекбоксы и радиокнопки

Стили элементов включены в тему

Чекбокс


Радиокнопки

Поле ввода

 

Поле для ввода многострочного текста

Селекты

Селект простой

Не выбрано
  • /li>


Селект древовидный

все


Селект со сбросом

Поля выбора дат с дейтпикерами

Выбор диапазона (range-slider)

Нам понадобятся:

  • Скрипты: /st/js/common/slider-range.js
  • Стили для точки сборки: front/web/css/adaptive/src/common/slider-range.less
Слайдер

Капча

Мультивыбор

Рубрики

Прикрепить файлы

После выбора файлов нажатием на кнопку "Прикрепить файлы" вместо сообщения "Файл не выбран" показываются имена файлов и кнопка отмены загрузки (возвращает исходное положение с удалением сообщения валидации, если файл не отвечает описанным ниже требованиям).

Нам понадобятся:

  • Скрипт: front/web/js/common/file-chooser.js (для отображения имени файла и очистки файлового поля).
  • Стили для точки сборки: front/web/css/adaptive/src/common/post-file.less.

Подсказчик адресов ГАР

При вводе адреса в поле появляется подсказчик, который по введенным символам предлагает варианты из справочника

Подсказчик умеет заполнять поля формы дополнительными данными из ГАР, например индекс.



Поле с подсказчиком

Запрос из поля идет по подстроке на сервис suggester. Вывод результатов в выпадающем списке.  

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

Стили простых маркированных списков созданы для статических страниц и включены в тему. Проще всего задействовать эти стили, используя маркированный список в рамках родительского класса .static-content

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

Стили простых нумерованных списков созданы для статических страниц и включены в тему. Проще всего задействовать эти стили, используя нумерованный список в рамках родителського класса .static-content

  1. Пункт первый.
  2. Пункт второй.
  3. Пункт третий.

Список описаний

Наименование
Открытое акционерное общество «Российские железные дороги» в лице Московской железной дороги – филиала ОАО «РЖД» – проводит аукцион на заключение договора субаренды принадлежащего ОАО «РЖД»
Заказчик
ОАО "РЖД"
Дата публикации
20.02.2020

Список файлов

Пагинация

В демо функционал не работает (перечень отсутствует)

Примеры работы:

Нам понадобятся:

  • Шаблон (самодокументированный): front/app/ucm/templates/xslt/_common/pager.xsl.
  • Скрипт: в шаблоне.
  • Стили для точки сборки: front/web/css/adaptive/src/common/pager.less.

Пример обычной планки (модификатор переключает положение)


 

Пример верхней планки и селекта для выбора количества записей на странице

Показывать на странице

Многостраничная сортировка

В демо функционал не работает (перечень отсутствует)

Примеры работы:

Нам понадобятся:

  • Шаблон (самодокументированный): front/app/ucm/templates/xslt/_common/sorter.xsl.
  • Стили для точки сборки: front/web/css/adaptive/src/common/sorter.less.
Тариф
Условия
Для кого
Полный
Общедоступный
Для всех
Детский
-70%
Для детей до 10 лет
День рождения
-30%
Имениннику и трем его друзьям

Вкладки со скроллингом

При невлезании в ширину враппера скроллятся, как нативно, так и со стрелочками (шаг - ширина враппера).

Пример работы:

Нам понадобятся:

  • Шаблон app\ucm\templates\xslt\_common\tabs-list.xsl - самодокументированный, и js уже в нем.
  • Стили для точки сборки: front\web\css\adaptive\src\common\tabs-list.less.

Если идентификатор вкладки начинается с #, работает двусторонняя связь с hash адресной строки:

  • При нажатии вкладки в адресную строку hash заменяется на идентификатор вкладки.
  • При наличии подходящего hash в урле на момент загрузки будет активирована соотв. вкладка, что позволяет ссылаться на конкретную вкладку. В противном случае активируется первая вкладка, и чтобы она сразу была активного вида, не дожидаясь работы скрипта, можно дать ей класс active на стороне сервера.
Наименование
Открытое акционерное общество «Российские железные дороги» в лице Московской железной дороги – филиала ОАО «РЖД» – проводит аукцион на заключение договора субаренды принадлежащего ОАО «РЖД»
Заказчик
ОАО "РЖД"
Дата публикации
20.02.2020

Меню страницы

Нам понадобятся:

  • Стили для точки сборки: front/web/css/adaptive/src/common/page-menu.less
  • Стили для лейблов: front/web/css/adaptive/src/common/label.less

Оглавление

Таблица классическая

Требует обертки с классом .table-wrap для горизонтального скролла при невмещении в контентную область (особенно актуально для мобильных разрешений)

Можно использовать несколько модификаторов:

  • .table_no-bg - таблица будет без фона
  • .table_air - больше "воздуха" для узких строк с обилием иконок
  • .table_no-more - вариант адаптивности на мобильных: не показываем шапку, перестраиваем строки в колонку. Не влияет на отображение десктопное/планшетное.

Вторая строка здесь с классом .table__clickline. Клик по любому ее месту вызывает переход по значению атрибута date-href (ссылки внутри не рекомендуются). Текст внутри ячеек этой строки по умолчанию при ховере красный. Если надо сделать ячейки с черным текстом, им задается класс .text-black. Логика подключается в теме через UTIL.init.common()

№ Наименование лота Начальная (максимальная)
цена договора		 Классификация
по ОКПД2		 Классификация
по ОКВЭД2		 ОКАТО
1. На право заключения договора поставки подшипников для дочерних и зависимых обществ ОАО "РЖД". 4 538 209.97 руб., без НДС Тут какая-то ссылка
2. На право заключения договора поставки подшипников для дочерних и зависимых обществ ОАО "РЖД". 4 538 209.97 руб., без НДС Ссылка на яндекс

Таблица вертикальная классическая

Вариант таблицы с шапкой по вертикали. Для отрисовки вертикального расположения заголовка используются CSS стили, применяющиеся к ячейкам с атрибутом data-vhead="vhead"

Используя class модификатор table2__col_dark шапка у данной таблицы примит стиль "Темный".

Наименование лота На право заключения договора поставки подшипников для дочерних и зависимых обществ ОАО "РЖД".
Начальная (максимальная)
цена договора		 4 538 209.97 руб., без НДС
Классификация
по ОКПД2		 Тут какая-то ссылка
Классификация
по ОКВЭД2
ОКАТО

Таблица адаптивная

Вариант псевдо-таблицы, полностью адаптивной под мобильные устройства. Данная таблица построена на <div>, что позволяет легче управлять элементами и добавлять например ссылку на строку без использования js

Можно использовать несколько модификаторов:

  • .table2_air - больше "воздуха" для узких строк с обилием иконок
  • .table2_interactive-list - таблица становится "Интерактивным списком": в конце строки появляется стрелочка, если строка является ссылкой.

Таблица строится по системе компановки элементов Flexbox. По умолчанию для таблицы задано 6 ячеек, ширины которых равны 100%/6. Для манипуляцией размером колонок необходимо создавать/добавлять класс комификатор. Создан класс модификатор для ячеек table2__col_fluid, который примит остаток между разницей от всей ширины таблицы и оставшихся ширин колонок.

Например: ниже представлена таблицы с 5 колонками, по умолчанию ширины 4-х из них равны, width:calc(100%/6), и 4-я по счету колонка с модификатором table2__col_fluid. Получиться динамическая ширина колонок с размерами, по 16% для всех колонок кроме 4-ой, у которой ширина примит значение 33%. Рабочий пример можно посмотреть на странице тендеров https://new-company.nu.oooinex.ru/ru/page/4893

Тариф
Условия
Для кого
Полный
Общедоступный
Для всех
Детский
-70%
Для детей до 10 лет
День рождения
-30%
Имениннику и трем его друзьям
Медовый месяц
-50%
Молодоженам в купе-переговорной
Junior
-30%
Пассажирам от 10 до 21 года
Senior
-30%
Для пассажиров от 60 лет
Для маломобильных пассажиров
-40%
Пассажиру с ограниченными возможностями (инвалидность) и его сопровождающему
Больше пространства
-50% (на второе кресло)
Два кресла для 1 человека
Туда-обратно
- 20%
На обратный билет
Групповой
Зависит от условий
10 человек и больше (для юридических лиц)
Школьный групповой
Зависит от условий
Для группы школьников от 10 до 18 лет
Детский групповой
Зависит от условий
Для группы детей до 10 лет
Студент
-50%
Для студентов

Таблица вертикальная адаптивная

Вариант адаптивной таблицы с шапкой по вертикали. Для отрисовки вертикального расположения заголовка используется class модификатор таблицы table2__vertical-header

Используя для таблицы class модификатор table2__vertical-header_dark шапка у данной таблицы примит стиль "Темный".

Тариф
Полный
Условия для проверки длинного заголовка
-70%
Для кого
Пассажиру с ограниченными возможностями (инвалидности) и его сопровождающемл

Свернуть / развернуть

Пример работы:

Нам понадобятся:

  • Шаблон: app/ucm/templates/xslt/_common/switcher.xsl.
  • Скрипт: внутри шаблона.
  • Стили для точки сборки: front/web/css/adaptive/src/common/switcher.less

Необходим общий родитель с классом j-switch, внутри кнопка-свичер и скрываемый контент в обертке с классом j-switch-details

Скрываемый контент

Вариация для карты

Скрываемый контент

Раскрывающийся контент

Пример работы:

Нам понадобятся:

  • Шаблон с примером использования: front\app\ucm\templates\xslt\disclosure\disclosure.xsl
  • Скрипт включен в тему
  • Стили включены в тему
  • Стили для лейблов: front/web/css/adaptive/src/common/label.less

Спойлер простой свернутый:

При покупке билета вы можете воспользоваться общедоступными и специальными тарифными планами. Особенность спецтарифов в том, что они действуют при соблюдении ряда условий: соответствия возраста, оформления в одном заказе поездки и «туда», и «обратно» и т.д.

Применение одновременно нескольких тарифных планов (кроме предусмотренных для пассажиров на местах в «детском купе» и на местах для маломобильных пассажиров/инвалидов) не предусмотрено. Минимальная стоимость доступна, если вы оформляете билет за 90 суток до отправления поезда и в случае низкого или умеренно низкого спроса. Снижение стоимости по специальным и общедоступным тарифным планам применяется к стоимости проезда (сервисные и комиссионные сборы всегда оформляются по полной стоимости).



Спойлер простой свернутый с лейблом:

При покупке билета вы можете воспользоваться общедоступными и специальными тарифными планами. Особенность спецтарифов в том, что они действуют при соблюдении ряда условий: соответствия возраста, оформления в одном заказе поездки и «туда», и «обратно» и т.д.



Спойлер простой развернутый:

Идентификационный
номер		 Дата присвоения идентификационного
номера		 Максимальный объем эмиссии, руб. Программа биржевых облигаций
4-65045-D-001P-02E 15.11.2016 2 700 000 000 000 .pdf
4-65045-D-002P-02E 23.08.2018 80 000 000 000 .pdf



Спойлер с доп. элементами:

Поезд Москва Ленинградский вокзал/Курский вокзал Тверь Вышний Волочек Бологое
752
ежедневно		 05:45 - - -
754
ежедневно		 06:50 07:54-07:55 - 08:51-08:52
756
ежедневно		 07:00 08:05-08:06 08:46-08:47 -



Спойлер с запретом сворачивания:

Отмены поездов

Отменены все поезда и беспересадочные вагоны № 17/18 Москва – Ницца – Москва

Подробнее ознакомиться с информацией вы можете по ссылке.



Вложенные спойлеры:

Технология продажи проездных документов – сложный производственный процесс.

В соответствии с пунктом 13 «Правил перевозок пассажиров, багажа, грузобагажа железнодорожным транспортом» (утверждены приказом Минтранса от 19.12.2013 №473), открытие продажи проездных документов на дальние пассажирские поезда ежедневного назначения производится не менее чем за 45 суток до отправления поезда.

Учитывая пожелания пассажиров и высокий спрос на перевозки скоростными поездами «Сапсан», срок открытия продажи поездных документов по инициативе перевозчика был увеличен до 90-120 суток.

Время открытия продажи билетов.

В соответствии с приказом Федеральной службы по тарифам от 14 декабря 2010 года №431-т/1 ценообразование в скоростных поездах «Сапсан» находится в зоне рыночной экономики, без привлечения государства в качестве регулятора в части возмещения затрат перевозчику. Формирование стоимости направлено на увеличение объемов перевозок, зависит от времени, оставшегося до отправления, популярности рейса, оцениваемого по ретроспективным показателям, и текущего спроса, сформированного рынком на перевозку конкретным поездом по каждому классу обслуживания в отдельности.

В случае оформления электронного билета на сайте rzd.ru стоимость в процессе оформления в списке доступных к оформлению рейсов и вагонов в поездах носит справочный характер и отражает стоимость на момент просмотра. С учетом высокого спроса повышение цен на проезд начинается в первые минуты после открытия продажи. Как правило, это происходит при оформлении билетов на рейсы скоростных поездов «Сапсан» отправлением в выездные дни (пятница, воскресенье, предпраздничные и праздничные дни).

Подсистема динамического управления тарифами и стимулирования спроса (ДУТИСС) оценивает текущую населенность на момент резервирования места и формирует окончательную стоимость билета.

Окончательная стоимость отражается после резервирования места на этапе «Проверка заказа». При этом пользователь вправе согласиться с указанной стоимостью или отказаться от дальнейшего оформления. Свое согласие со стоимостью электронного билета пользователь удостоверяет отметкой внизу страницы на данном этапе, соглашаясь также с реквизитами поездки и правилами оформления электронных билетов. Без проставления необходимой отметки о согласии невозможно перейти к оплате заказа.

В целях дополнительного информирования пользователей официального сайта ОАО «РЖД» на этапе выбора поезда размещена информация о возможном изменении стоимости в процессе оформления. При необходимости пользователи сайта rzd.ru могут ознакомиться с информацией о тарифной и маркетинговой политике в разделе «Стоимость проезда в поезде «Сапсан».

­Компанией ОАО «РЖД» для пассажиров скоростных поездов «Сапсан» в возрасте от 60 лет и более предоставляется скидка по специальному тарифу Senior в размере 30% от текущей стоимости проезда на момент оформления.

Для пассажиров в возрасте от 10 до 21 года с 1 сентября 2016 года действует специальный тариф Junior. Скидка по данному специальному тарифу составляет 30% от текущей стоимости проезда на момент оформления.

Для пассажиров любых возрастных групп при одновременном оформлении билетов на поезда «Сапсан» в направлении «туда» и «обратно» предоставляется скидка по общедоступному специальному тарифу «Туда-обратно». В соответствии с действующими условиями указанного специального тарифа скидка на билет в направлении «обратно» составляет 20%, при этом билет в направлении «туда» оформляется по полной стоимости.

Приобретение проездных документов по указанным выше тарифным планам доступно к оформлению пассажирам по всем каналам продаж, в том числе на официальном сайте ОАО «РЖД».

Приобретение проездных документов для проезда одного пассажира на двух смежных креслах (со скидкой в размере 50% от стоимости билета на 2-е место), без ограничения по возрасту пассажира на момент отправления поезда доступно по специальному тарифу Single. Оформление данного тарифа доступно только в билетных кассах, по устному заявлению пассажира.

Для пассажиров скоростных поездов «Сапсан» доступно оформление дорожной или электронной карты «Универсальная», предоставляющей право на приобретение билетов со скидкой 10% от текущей стоимости на момент оформления билета.

Для пассажиров скоростных поездов «Сапсан» доступно оформление дорожной или электронной карты «Деловой проездной». Подробнее о тарифных планах и условиях применения в разделе «Деловой проездной».

Более подробную информацию о маркетинговой и тарифной политике Дирекции Вы можете узнать на официальном сайте ОАО «РЖД» в разделе «Стоимость проезда в поезде «Сапсан».

Внимание! Допускается оформление в одном заказе электронных билетов на скоростные поезда «Сапсан» с применением различных специальных и общедоступных тарифных планов (Полный, детский, детский без места, Senior, Junior, Туда-обратно, дорожные и электронные карты, «Деловой проездной»). При этом к одному пассажиру может быть применен только один специальный или общедоступный тариф. Скидка по специальному тарифному плану применяется только к стоимости проезда, за исключением суммы сервисного сбора.

Все вопросы и ответы

Раскрывающийся блок информации

Нам понадобятся:

  • Шаблон c примером использования: front/app/ucm/templates/xslt/pass/pass-main_accessible.xsl.
  • Скрипт: front/web/js/common/unfolding-block.js.
  • Стили для точки сборки: front/web/css/adaptive/src/blocks/notification.less.
Обращаем внимание иностранных граждан на невозможность въезда в РФ по электронной визе на поездах в Санкт-Петербург, Ленинградскую и Калининградскую области...

Контекстный список

По наведению или фокусу на ссылкообразную кнопку появляется всплывающее окно со списком (напр, файлов).

Нам понадобятся:

  • Скрипт: front/web/js/common/context-list.js (для разруливания позиционирования списка, чтобы он не заходил за края обрезающего контейнера).
  • Стили для точки сборки: front/web/css/adaptive/src/common/context-list.less.
Форма 9д-5 за апрель 2020 г.doc Форма 9д-5 за май 2020 г.doc Форма 9д-5 за июнь 2020 г.doc Остальные изменения

 

 

Блок без фона

У нас имеется набор классов, облегчающий построение сетки страницы.

Их работу можно увидеть на любой стартовой и многих внутренних страницах.

  • .contents стили включены в тему, но могут кастомизироваться на конкретных страницах при необходимости. Обеспечивает ширину и центрирование контентной части.
Контент

Блок с белым фоном

Белая карточка с характерными внутренними и наружными отступами, типовой блок сайта. Может быть взята за основу построения других блоков.

В данном UIkit используется иногда как контейнер для небольших элементов, не имеющих собственных фонов и отступов.

Какой-то текст

Блок пустых результатов

Не ограничен по ширине, тянется на всю ширину родителя.

Ничего не найдено
Попробуйте изменить поисковые критерии

Блок с иконкой / ссылкой

Не ограничен по ширине, тянется на всю ширину родителя

Может показываться в форме или вне ее, как самостоятельный блок, если интересует как самостоятельный блок - стоит добавить класс-модификатор .post-status_alone.

Сообщение об успехе, модификатор .post-status_success (иначе пустой кружок):

Все прошло так, как и задумывалось

А как же иначе?



Сообщение об ошибке, иконка в разметке:

А иначе - вот так...



Добавим сюда кнопку и другую иконку:

Это может быть как кнопка, так и ссылка

Блок количества найденных результатов

Нам понадобятся:

  • Шаблон: front\app\ucm\templates\xslt\_common\search-count.xsl
  • Стили для точки сборки: front\web\css\adaptive\src\common\search-count.less

Шаблон умеет правильно склонять "Найден/найдено" и "результат/результата/результатов" в зависимости от числа результатов (sh:declension) и выводить числа через пробел между миллионами и тысячами (sh:format-1000)

Найдено
11 635 результатов

Результаты поиска .xls

Блок количества найденных результатов – альтернативная версия

Нам понадобятся:

  • Стили для точки сборки: front\web\css\adaptive\src\common\materials-found.less
Найдено материалов: 20729

Блок новости

Единичный блок новости. Содержит в себе заголовок с ссылкой, список разделов и блок даты/времени. Может быть иметь белый или серый фон.

РЖД обновляет парк вагонов дальнего следования

04.04.2024   14:38

Познакомиться со всеми вокзалами России теперь можно на сайте ОАО «РЖД»

03.04.2024   13:11

Раскладка блоков по 3 и 4

Возможности, заложенные в front/web/css/adaptive/src/blocks/blocks-row.less

Как правило используется в сочетании с front/web/css/adaptive/src/blocks/row-adaptive.less, посмотреть описание

  • Структуры из шести блоков описана отдельно, перейти
  • Структуры из 3 и 4 блоков в строке строятся классами .three-blocks-row и .four-blocks-row соответственно. Они фиксируют ширину дочерних .block на десктопе, чтобы их помещалось нужное количество и они располагались по сетке. Поведение раскладки в адаптиве контролируется дополнительными классами родительского контейнера,см. описание
  • .three-flex-start-row - Структуры из 3 блоков - разновидность для случаев, когда мы знаем, что в одном из рядов может быть не полный комплект из трех блоков, а 1 или два, и нужно чтобы они начинались слева и распределялись также, как в случае полного комплекта. На планшете и мобилке располагаются один под другим. Ширина блоков высчитывается автоматически
  • Пример: Опросы
  • Требуется обертка с классом .three-flex-start-row, она управляет раскладкой дочерних элементов с классом .block

Существует набор модификаторов высоты:

  • .block-height-208 - фиксированная высота в 208px
  • .block-height-224 - фиксированная высота в 224px
  • .block-height-256 - фиксированная высота в 256px
  • .block-height-272 - фиксированная высота в 272px
  • .block-height-288 - фиксированная высота в 288px
  • .block-height-336 - фиксированная высота в 336px

Не стоит ожидать корректной работы при их комбинации. Будет срабатывать тот класс, чье правило ниже в стилях

.three-blocks-row:

1
2
3



.four-blocks-row:

1
2
3
4



.three-flex-start-row:

1
2
3
4
5

Раскладка 6 блоков

Структура из 6 одинаковых блоков

Строится родительским классом .six-blocks, не используется без вспомогательных классов, задающих поведение на планшетах / мобильных, в данном примере .tablet-scroll и mobile-one-under-another, подробнее об этих классах здесь; и дочерними блоками .block

Структура из 6 разных блоков

Структура из 6 разных блоков, 4 из которых занимают четверть контентной области, а 2 - половину (на десктопе), на планшете широкие занимают всю контентную область, маленькие - половину, на мобильном - все занимают 100% и располагаются один под другим.

Нам понадобится родительский контейнер с классом .six-blocks-diff. Широкие блоки, занимающие на десктопе половину ширины, сейчас представлены классами .half-link и .half-block. Узкие блоки, занимающие четверть пространства - классами .small-white / .small-white_img и .quarter-block. Необходимо контролировать так или иначе высоту этих дочерних блоков, чтобы они были одинаковы.

Пример работы:

Нам понадобятся:

  • Шаблон (пример использования): front/app/ucm/templates/xslt/main/EntryPoint.redesign.xsl (четвертая группа блоков)
  • Стили для точки сборки (поведение на мобильных и планшетах): front/web/css/adaptive/src/blocks/row-adaptive.less
  • Стили для точки сборки: front/web/css/adaptive/src/blocks/blocks-row.less

.six-blocks:

1
2
3
4
5
6



.six-blocks-diff:

1
2
3
4
5
6

 

1
2
3
4
5
6



Класс обертки .six-blocks-diff может использоваться для одной строки, например, из двух широких блоков:

1
2



Или из трех разных:

1
2
3

Адаптивные структуры

Возможности, заложенные в front/web/css/adaptive/src/blocks/row-adaptive.less

Как правило используется в сочетании с front/web/css/adaptive/src/blocks/blocks-row.less, посмотреть возможности

Поведение стркутур на планшете и мобилке регулируется классами контейнера:

  • .mobile-scroll скролл на мобилке
  • .mobile-one-under-another один под другим на мобилке
  • .tablet-scroll скролл на планшете
  • .tablet-two-cols в две колонки на планшете
  • .tablet-one-under-another один под другим на планшете

Несколько примеров на базе .four-blocks-row:

.mobile-scroll.tablet-scroll:

1
2
3
4



.mobile-one-under-another.tablet-two-cols:

1
2
3
4

Фотогалерея слайдер

Презентация слайдер

Данный элемент используется только в рамках HTML-редактора, и представлен здесь с целью отображения дизайна.

 

Объекты на карте

Создать слой для карты и карточки объекта - пример во вкладке HTML

Создать объект(ы) с точкой - пример во вкладке HTML

Нам понадобятся:

  • Подключить скрипт карты ГИП с полученным в БП URL api_url и ключом api_key
    <script type="text/javascript" src="{$api_url}" data-api-key="{$api_key}"/script>,
  • Скрипт: /st/js/dist/gip_map.js,
  • Стиль: /st/css/adaptive/gip_map.css

Пример работы:

Счетчик времени

Для него используется два параметра, id блока и data-time атрибут для отображения времени в формате YYYY-MM-DDTHH:mm:ss.