Типография

JSN Vintage был разработан с крайней акцентом на типографии , и мы считаем, что она обеспечивает наиболее полное содержание презентации. Заголовки, текст, ссылки, таблицы, изображения, всё с высоким уровнем изысканности. Давайте взглянем.

 

Заголовки

Заголовок H1

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." перевести его я не смог, если кто сможет перевести пишите, по моему там просто бутер.

Заголовок H2

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." перевести его я не смог, если кто сможет перевести пишите, по моему там просто бутер.

Заголовок H3

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Заголовок H4

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Заголовок H5

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Заголовок H6

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.


Текстовые столбцы

Вы можете организовать содержимое в нескольких столбцах, используя очень простой html-кода. JSN Vintage определит количество столбцов определяются и автоматически делать договоренности.

Usage: <div class=grid-layout><div>Текстовый столбец 1</div><div>Текстовый столбец 2</div></div>

Содержание, расположены в 2 колонки

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Содержание, расположены в 3 колонки

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Содержание, расположены в 4 колонки

Столбец text

В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Столбец text

В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Столбец text

В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Столбец text

В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Содержание, расположены в 5 столбцов

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet.

Столбец text

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet.


Стили текста

Отформатирован текст (<pre> тег)

#ja-rightcol {
 width: 180px;
 float: right;
 color: #EEEEEE;
}

Цитировать текст (<blockquote> тег)

Вы можете нам этот стиль процитировать чужой речи, идея или фрагмент из некоторых книг, статей и т.д. Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: <blockquote>Это ваша цитата</blockquote>

Буквица

Вы этот стиль можно использовать специальные буквица символ для журнала / газета текст пункта. Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < p class="text-dropcap" >Это текст с dropcap символом.</p>

Выделенный текст

Этот стиль для выделения важных слов и/или ключевое слово выражение можно использовать в странице результатов поиска. Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < span class="text-highlight" >Это текст, выделены.</span>

Выделенный текст при наведении

Этот стиль можно использовать для выделения важных текстовый блок на мыши над. Просто наведите курсор мыши на этот блок текста, чтобы увидеть, как он выделяется.

Использование: < div class="text-box-highlight" >Это текст, выделены.</div>

Этот стиль можно использовать для выделения важных текстовый блок на мыши над. Просто наведите курсор мыши на этот блок текста, чтобы увидеть, как он выделяется.

Использование: < div class="text-box-highlight" >Это текст, выделены.</div>

Текст оповещения

Этот стиль можно использовать для оповещения или предупреждения текста абзаца, требующих внимания пользователя. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < p class="text-alert"» >Это текст, который требует внимания пользователя.</p>

Информация текст

Этот стиль можно использовать для регулярной информации текст пункта, который не требует много пользователя внимания. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < p class="text-info" >Это ваш d текст.</p>

Скачать текст

Этот стиль можно использовать для информации текста абзаца, относящиеся к процесс загрузки. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < p class="text-download">Это будет загрузить соответствующий текст.</p>

Текст подсказки

Этот стиль можно использовать для полезной информации как советы, подсказки или справки текст. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < p class="text-tip">Это текст подсказки или помочь yourtip.</p>

Текст комментария

Этот стиль можно использовать для комментариев текст абзаца. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: < p class="text-comment">Это ваш текст комментария.</p>

Вложение текст

Этот стиль можно использовать для абзаца текста информации, связанных с файла вложения. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: <p class="text-attachment">Это ваши вложения связанные с текстом.</p>

Видео текст

Этот стиль можно использовать для описания текста абзаца, связанных с видео-файл. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: <p class="text-video">Это ваше видео соответствующий текст.</p>

Аудио текст

Этот стиль можно использовать для описания текста абзаца, относящиеся к аудио-файл. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.

Использование: <p class="text-audio">Это ваш аудио соответствующий текст.</p>


Стили ссылок

Значок стили ссылок

Вы можете прикрепить до 20 стандартные иконки фронт любую ссылку, добавив простой класс к нему.

Usage: <a class="link-icon icon-xxx">This is link text.</a>, where xxx is the name of icon to be applied. Detailed information about all icon names can be found in template documentation.

Example: <a class="link-icon icon-download">This is link to download something.</a>

Link Button Styles

JSN Vintage offers 8 button styles to decorate any call-to-action links you have in the content.

Usage: <a class="link-button button-xxx">This is link text.</a>, where xxx is the button color name selected from: light, dark, green, orange, blue and red.

Example: <a class="link-button button-orange">See plans & pricing.</a>

Combination of Button and Icon Styles

You can use both button and icon link style combined.

Usage: <a class="link-button button-xxx"><span class="link-icon icon-yyy">This is link text.</span></a>, where xxx and yyy are button color and icon names respectively.

Example: <a class="link-button button-green"><span class="link-icon icon-cart">Add to cart.</span></a>

Link Readmore Styles

JSN Vintage offers 8 readmore styles to decorate any call-to-action links you have in the content.

Extension link styles

JSN Vintage is able to attach not only descriptive icon to the front of link as described in above section, but also 23 extension icons to the end of the link.

All icons can be assigned automatically by enabling a template parameter or manually by adding simple class to the link.

Usage: <a class="link-icon-ext icon-ext-xxx">This is link text.</a>, where xxx is the icon name. Detailed information about all icon names can be found in template documentation.


Table Styles

Plain Rows table style

Table headerColumn header 1Column header 2Column header 3
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum

Color Stripes table style

Table headerColumn header 1Column header 2Column header 3
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum

Grey Stripes table style

Table headerColumn header 1Column header 2Column header 3
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Row header 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum

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

Стандартный список стилей

Неупорядоченный список
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Упорядоченный список
  1. Lorem ipsum dolor sit amet
  2. Consetetur sadipscing elitr
  3. Sed диам voluptua

Стрелка списка стилей

Красная стрелка
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Синяя стрелка
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Зеленая стрелка
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua

Icon Список стилей

Статья список значков
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Значок списка папок
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Изображение значка список
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Список онлайн значок
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Значок звезды список
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Значок списка пользователей
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua

Можно назначить любого из предопределенных 20 значков для элементов списка. 6 икон, показано выше являются только образцами.

Число стилей списков

Синий список номеров пуля
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Список Зеленый пуля
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Пуля серый список номеров
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Пуля оранжевый список номеров
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Пуля красный список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Фиолетовый пуля список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Синий значный номер список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Список Зеленый цифр номера
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Серый значный номер списка
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Оранжевый значный номер списка
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Цифра красный список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Фиолетовый значный номер списка
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua