Типография
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-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 header | Column header 1 | Column header 2 | Column 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 header | Column header 1 | Column header 2 | Column 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 header | Column header 1 | Column header 2 | Column 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
Упорядоченный список
- 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
Icon Список стилей
Статья список значков
Значок списка папок
Изображение значка список
Список онлайн значок
Значок звезды список
Значок списка пользователей
Можно назначить любого из предопределенных 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
Этот стиль можно использовать для комментариев текст абзаца. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Aenean lorem consequat consequat ЕС.
Использование: < p class="text-comment">Это ваш текст комментария.</p>