 |
 |
 |
 |
 |
JSN Solid was developed with extreme focus on typography and we believe it provides the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let's take a look.
Headings
This is an H1 Header
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.
This is an H2 Header
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.
This is an H3 Header
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.
This is an H4 Header
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.
This is an H5 Header
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.
This is an H6 Header
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.
Text columns
You can arrange content in multiple columns by using very simple html code. JSN Solid will detect the amount of columns you defined and automatically make arrangement.
Usage: <div class=”grid-layout”><div>Text in column 1</div><div>Text in column 2</div></div>
Content arranged in 2 columns
Text column
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.
Text column
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.
Content arranged in 3 columns
Text column
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.
Text column
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.
Text column
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.
Content arranged in 4 columns
Text column
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Text column
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Text column
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Text column
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Content arranged in 5 columns
Text column
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Text column
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Text column
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Text column
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Text column
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Text styles
Preformatted text (<pre> tag)
div.grid-layout2 div.grid-col {
float: left;
width: 49.95%;
}
div.grid-layout3 div.grid-col {
float: left;
width: 33.3%;
}
Quote text (<blockquote> tag)
You can us this style to quote somebody's speech, idea or a fragment from some book, articles, etc. 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.
Usage: <blockquote>This is your quote</blockquote>
Drop Cap
You can use this special drop cap symbol style for magazine / newspaper text paragraph. 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.
Usage: <p class="text-dropcap">This is the text with dropcap symbol.</p>
Highlighted Text
You can use this style to highlight important words and / or keyword expression in search result page. 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.
Usage: <span class="text-highlight">This is the text to be highlighted.</span>
Highlighted Text on mouse over
You can use this style to highlight important text block on mouse over. Just roll mouse over this text block to see how it's highlighted.
Usage: <div class="text-box-highlight">This is the text to be highlighted.</div>
You can use this style to highlight important text block on mouse over. Just roll mouse over this text block to see how it's highlighted.
Usage: <div class="text-box-highlight">This is the text to be highlighted.</div>
Alert Text
You can use this style for alert or warning text paragraph requiring user's attention. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-alert">This is text that requires user's attentions.</p>
Info Text
You can use this style for regular information text paragraph that does not require much user's attentions. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-info">This is your d text.</p>
Download Text
You can use this style for information text paragraph related to download process. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-download">This is download related text.</p>
Tip Text
You can use this style for useful information like tips, hint or help text. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-tip">This is yourtip hint or help text.</p>
Comment Text
Attachment Text
Video Text
You can use this style for description text paragraph that related to video file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-video">This is your video related text.</p>
Audio Text
You can use this style for description text paragraph related to audio file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-audio">This is your audio related text.</p>
Link Styles
Link Icon Styles
You can attach up to 20 predefined icons to the front of any link by adding simple class to it.
Usage: <a class="link-icon jsn-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 jsn-icon-download">This is link to download something.</a>
Link Button Styles
JSN Solid offers 6 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 jsn-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 jsn-icon-cart">Add to cart.</span></a>
Extension link styles
JSN Solid 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 jsn-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 |
|---|---|---|---|
| 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 |
| Table footer | Footer data | ||
Color Stripes table style
| Table header | Column header 1 | Column header 2 | Column header 3 |
|---|---|---|---|
| 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 |
| Table footer | Footer data | ||
Grey Stripes table style
| Table header | Column header 1 | Column header 2 | Column header 3 |
|---|---|---|---|
| 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 |
| Table footer | Footer data | ||
List styles
Standard list styles
Unordered list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Ordered list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Arrow list styles
Red arrow
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Blue arrow
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Green arrow
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Icon list styles
Article icon list
Folder icon list
Image icon list
Online icon list
Star icon list
User icon list
You can assign any of predefined 20 icons to list items. 6 icons shown above are just samples.
Number list styles
Blue Bullet number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Green Bullet number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Brown Bullet number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Yellow Bullet number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Red Bullet number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Pink Bullet number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Blue Digit number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Green Digit number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Violet Digit number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Orange Digit number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Red Digit number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
Grey Digit number list
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam voluptua
3 октября - 26 декабря Занятия Школы гуманитария ПСТГУ для старшеклассников
Свято-Тихоновский университет приглашает всех интересующихся старшеклассников в Школу гуманитария, где мы говорим о главных текстах европейской культуры. Тема первого семестра:...
12 октября – 7 декабря 2024 г. – Курс "Мир в зеркале культуры. Афины…
Онлайн курс от создателя отделения теории истории мировой культуры в гимназии 1514 (Москва), д.ф.н. В.В.Глебкина. Как думали и видели мир люди...
20 ноября 2024 — Всероссийская интеллектуальная командная игра для старшеклассников «Литературная планета» (Санкт-Петербург)
Старшеклассники приглашаются принять участие в командной интеллектуальной игре «Литературная планета». Соревнование пройдёт в два тура — первый очно-заочный и второй...
20 ноября 2024 — Встреча «Как говорить с детьми о репрессиях» (Москва)
В среду 20 ноября в 19:00 в Свято-Филаретовском институте в Москве пройдёт встреча клуба «В поисках смысла» на тему «Как...
6 ноября 2024 — Старт курсов повышения квалификации «Театральная педагогика как способ активизации…
Московский городской педагогический университет (МГПУ) открывает курсы повышения квалификации «Театральная педагогика как способ активизации творческого потенциала школьников». Приглашаются к участию школьные...
27–31 октября 2024 г. — Семинар «Москва Булгакова: страницы творчества и места писателя»…
Учителя словесности, репетиторы и все, кому интересно творчество М. А. Булгакова приглашаются на семинар «Москва Булгакова: страницы творчества и места...
26–29 октября 2024 — Семинар для учителей словесности и тренинг для театральных педагогов…
26–29 октября 2024 года в Москве Большой детский фестиваль (БДФ) совместно со школой “Золотое сечение” проведут серию занятий для учителей-словесников...
20 октября 2024 — Дискуссия «Как преподавать литературу в школе сегодня?» и презентация…
20 октября 2024 года в Санкт-Петербурге состоится дискуссия «Как преподавать литературу в школе сегодня?» с презентацией книги Антона Ткаченко «Уроки...
При поддержке:
Популярное
- Список летнего чтения для 5 класса
- О.В. Смирнова. Что читать в 14-15 лет?
- Список летнего чтения для 6 класса
- Стихи поэтов-фронтовиков о войне
- Список летнего чтения для 8 класса
- Список летнего чтения для 7 класса
- Чисто по-человечески. Материалы к урокам
- Список летнего чтения для 9 класса
- Открытое письмо учителей литературы, методистов, вузовских преподавателей
Мозаика
- Как я сдавала ЕГЭ по литературе
- 18 декабря 2018 г. - Занятие Школы юного филолога НИУ ВШЭ. Тема: «Посторонись, двойка, туз идет!» или Поляки в Петербурге.
- Сергей Бочаров: in memoriam
- Презентация: Концепция и структура ФГОС
- 25.03.2017 - Родительский интенсив от Гильдии словесников
- Гражданка докторка. Выпуск №101
- Многопрофильная олимпиада «Аксиос»
- Материалы и фото литературно-олимпиадной смены 2021
© 2015 - Ассоциация «Гильдия Словесников». Все права защищены. Копирование материалов на сайте возможно только с использованием ссылки. © Дизайн и разработка сайта – id Creativ
Электронная почта: gildiya@slovesnik.org
Ассоциация «Гильдия словесников» является основанной на членстве некоммерческой организацией, объединяющей физических и юридических лиц на основе общности интересов для реализации целей, указанных в Уставе.
Ассоциация осуществляет свою деятельность в соответствии с Конституцией Российской Федерации, Гражданским кодексом Российской Федерации, Федеральным законом «О некоммерческих организациях», и другим действующим законодательством Российской Федерации.
You can use this style for comment text paragraph. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-comment">This is your comment text.</p>