Версия для печати

Примеры типографики

Здесь Вы сможете увидеть примеры использования расширенной Типографии для материалов Вашего сайта. Представлены примеры блоков для стилизации Вашего сайта. Для того, чтобы оформить Вашу информацию подобным образом, используйте кнопку Типография внизу Вашего визуального редактора при создании/редактировании материала, или скопируйте html код.

После того, как во время создания/изменения материала как щелкните по кнопке Типография, которая расположена в самом низу визуального редактора на панели задач слева, выберите нужную одноименную вкладку с группой элементов, следующей ниже, и для вставки в редактор щелкните по заголовку элемента (выделен зеленым цветом), после этого в редакторе будет добавлено соответствующее оформление, Вам останется всего-лишь заменить пример содержимого на Вашу информацию

Предупреждения

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

Заголовки

Заголовок h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus. Fusce eu felis erat.

Заголовок h2

Cras diam justo, sodales quis lobortis sed, lobortis vel mauris. Sed a mollis nunc. Quisque semper condimentum lectus, eget laoreet ipsum auctor et. Quisque sagittis luctus augue, id fringilla enim euismod quis. Nullam blandit, elit at euismod rutrum, tortor nibh posuere mauris, in volutpat diam ante ac dui.

Заголовок h3

Vivamus rhoncus arcu sit amet est tristique convallis nec vel eros. Vestibulum euismod luctus velit quis porta. Aliquam varius placerat mauris sed vehicula. Integer porta facilisis sapien, in tempus lorem mattis molestie. Suspendisse potenti.

Заголовок h4

Proin urna erat, egestas vel consectetur at, accumsan at purus. Donec est risus, facilisis dignissim placerat nec, euismod lacinia nisi. Nam ac sem sed quam sollicitudin condimentum et eu neque. Nunc enim urna, ultricies ac mollis pretium, imperdiet hendrerit massa.

Заголовок.

Подзаголовок.

Используйте <p class="blockHeadling">для заголовка</p>.Используйте <p class="blockSubHeadline">для подзаголовка</p>.Proin urna erat, egestas vel consectetur at, accumsan at purus. Donec est risus, facilisis dignissim placerat nec, euismod lacinia nisi. Nam ac sem sed quam sollicitudin condimentum et eu neque.

Небольшой заголовок

Большой заголовок

Набор иконок

Пример сообщения с иконкой файла.
Используйте <p class="blockfile1">Ваше сообщение будет здесь!</p>.

Пример сообщения с иконкой текстового файла.
Используйте <p class="blockfile2">Ваш текст будет здесь!</p>.

Пример сообщения с иконкой поиска.
Используйте <p class="blocksearch">Ваше сообщение будет здесь!</p>.

Пример сообщения с иконкой уменьшения.
Используйте <p class="blockzoomminus">Ваше сообщение будет здесь!</p>.

Пример сообщения с иконкой увеличения.
Используйте <p class="blockzoomplus">Ваш текст будет здесь!</p>.

Пример сообщения об ошибке.
Используйте <p class="blockerror">Ваше сообщение будет здесь!</p>.

Пример сообщения с галочкой.
Используйте <p class="blocktick">Ваше сообщение будет здесь!</p>.

Пример сообщения с книгой.
Используйте <p class="blockbook">Ваш текст будет здесь!</p>.

Пример сообщения с картой.
Используйте <p class="blockmap">Ваше сообщение будет здесь!</p>.

Пример сообщения с ярлыком.
Используйте <p class="blocktag">Ваше сообщение будет здесь!</p>.

Пример сообщения со статистикой.
Используйте <p class="blockstats">Ваш текст будет здесь!</p>.

Пример сообщения со звездочкой.
Используйте <p class="blockstar">Ваше сообщение будет здесь!</p>.

Пример сообщения с ленточкой.
Используйте <p class="blockribbon">Ваше сообщение будет здесь!</p>.

Пример сообщения с навигацией.
Используйте <p class="blocknav">Ваш текст будет здесь!</p>.

Пример сообщения с графиком.
Используйте <p class="blockgraph">Ваше сообщение будет здесь!</p>.

Пример сообщения с молнией.
Используйте <p class="blockflash">Ваше сообщение будет здесь!</p>.

Пример сообщения с меткой местоположения.
Используйте <p class="blocklocation">Ваш текст будет здесь!</p>.

Пример сообщения с меткой местоположения с минусом.
Используйте <p class="blocklocationminus">Ваше сообщение будет здесь!</p>.

Пример сообщения с меткой местоположения с плюсом.
Используйте <p class="blocklocationplus">Ваше сообщение будет здесь!</p>.

Пример сообщения с меткой лампочки.
Используйте <p class="blockbulb">Ваше сообщение будет здесь!</p>.

Подсказки

Вот несколько примеров подсказок: КлассическиеВот пример того, как Вы можете использовать CSS подсказки и свободно создать свои собственные в подобном стиле! , Требующие повышенного вниманияТребующие повышенного вниманияВот пример того, как Вы можете использовать CSS подсказки и свободно создать свои собственные в подобном стиле! , ПомощьПомощьВот пример того, как Вы можете использовать CSS подсказки и свободно создать свои собственные в подобном стиле! , ИнформационныеИнформационныеВот пример того, как Вы можете использовать CSS подсказки и свободно создать свои собственные в подобном стиле! и ПредупреждениеПредупреждениеВот пример того, как Вы можете использовать CSS подсказки и свободно создать свои собственные в подобном стиле! , оформленных при помощи CSS.
Вот пример того, как Вы можете использовать CSS подсказки и свободно создать свои собственные в подобном стиле!

Выделение текста

Выделение текста 1.
Используйте <span class="blockHighlight1">Ваша информация будет здесь!</span>.

Выделение текста 2.
Используйте <span class="blockHighlight2">Ваша информация будет здесь!</span>.

Выделение текста 3.
Используйте <span class="blockHighlight3">Ваша информация будет здесь!</span>.

Выделение текста 4.
Используйте <span class="blockHighlight4">Ваша информация будет здесь!</span>.

Код

#wrapper {
  position: relative;
  float: left;
  display: block;
}

Используйте <pre> или <div class="blockCode1">Здесь следует Ваш код</div>

#wrapper {
position: relative;
float: left;
display: block;
}

Используйте <div class="blockCode2">Здесь следует Ваш код</div>

Файл

#wrapper {
position: relative;
float: left;
display: block;
}

Используйте <div class="blockCode3"><h4>Имя Вашего файла</h4>Здесь следует Ваш код</div>

Списки

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Упорядоченные списки (буквенно - цифровые)

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum

Цифровые блоки

<p class="blockNumber1"><span>здесь следует номер</span>а здесь следует Ваш текст</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="blockNumber2"><span>здесь следует номер</span>а здесь следует Ваш текст</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="blockNumber3"><span>здесь следует номер</span>а здесь следует Ваш текст</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.