+7 (3412) 56-23-76
Заказать звонок

Вход Регистрация

Оформление

Заголовки
Списки
Код
Текст
Таблицы
Кнопки

Заголовки

Заголовок 1 уровня <h1>

Заголовок 2 уровня <h2>

Заголовок 3 уровня <h3>

Заголовок 4 уровня <h4>

Заголовок 5 уровня <h5>

Заголовок 6 уровня <h6>

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

<!-- Применить к тексту стили заголовка можно также с помощью классов: -->
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>

Списки

Маркированные `<li>`

Unordered list <ul>
List element
Across the sea of space, the stars are other suns.
Science cuts two ways, of course; its products can be used for both good and evil. But there’s no turning back from science. The early warnings about technological dangers also come from science.

Нумерованные `<ol>`

Ordered list <ol>
List element
The dreams of yesterday are the hopes of today and the reality of tomorrow.
Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.

Вложенные

Coffee
Tea
- Black tea
- Green tea
Milk

Смешанные

Coffee
Tea
- Black tea
- Green tea
Milk

Список описаний `<dl>`, `<dt>` и `<dd>`

Definition term <dt>: Definition <dd>
Earth: A kick-ass planet.
Pluto: A kick-ass former planet.
Space Ipsum: NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.

Код

Инлайн: <code>inline code<code>

Блок:

<pre>some code...</pre>

Элементы текста

anchor link <a>
abbreviation: SASS <abbr>
citation: A Study in Scarlet <cite>
Here’s the <code> element
deleted text: ~~Episodes I, II, III~~ <del>
definition: The definition element is the element being defined inline. <dfn>
emphasis <em>
inserted text <ins>
keyboard input: control + space <kbd>
mark element <mark>
meter: awesomeness <meter>
progress: 70 % <progress>

quotation (short): You just gotta believe! <q>
quotation within a quotation (short): Yo dawg, I heard you like quotes so I put this quote within this quote. <q>
strikethough: ~~Lance Armstrong remains steroid-free.~~ <s>
sample text: Error <samp>
small: Hydrogen <small>
small within small: Hydrogen Hydrogen <small>
strong: The Hammer <strong>
subscript: _Lower 0_{1_2₃} <sub>
superscript: I need a good ^superman joke to go here. 0^{1^2³} <sup>
time: Dec 9 <time>
underline: Never underline anything. <u>
variable: cat + dog = catdog <var>

Таблицы

Таблица в пользовательском тексте

Не требует специальной разметки, но должна распологаться в блоке контента <div class="b-ugc">

Наименование	Цена за 100 мм шва
Черновая сталь	9,38 руб.
Нержавеющая сталь / алюминий	12,19 руб.

<div class="b-ugc">
	<div class="b-ugc__table">
		<table>
			<thead>
			<tr>
				<th>Наименование</th>
				<th>Цена за&nbsp;100&nbsp;мм шва</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>Черновая сталь</td>
				<td>9,38&nbsp;руб.</td>
			</tr>
			<tr>
				<td>Нержавеющая сталь / алюминий</td>
				<td>12,19&nbsp;руб.</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>

Адаптивные таблицы

Фамилия	Имя	Отчество
Пашков	Сергей	Владимирович
Лобанов	Петр	Богданович
Воронов	Святослав	Владимирович

<table class="b-tableShort b-tableShort_multiple">
	<tr class="b-tableShort__line b-tableShort__line_head">
		<th class="b-tableShort__cell b-tableShort__cell_title">Фамилия</th>
		<th class="b-tableShort__cell b-tableShort__cell_title">Имя</th>
		<th class="b-tableShort__cell b-tableShort__cell_title">Отчество</th>
	</tr>
	<tr class="b-tableShort__line">
		<td data-label="Фамилия"
			class="b-tableShort__cell b-tableShort__cell_option"
		>
			<span>Пашков</span>
		</td>
		<td data-label="Имя"
			class="b-tableShort__cell b-tableShort__cell_value"
		>
			<span>Сергей</span>
		</td>
		<td data-label="Отчество"
			class="b-tableShort__cell b-tableShort__cell_value"
		>
			<span>Владимирович</span>
		</td>
	</tr>
	<tr class="b-tableShort__line">
		<td data-label="Фамилия"
			class="b-tableShort__cell b-tableShort__cell_option"
		>
			<span>Лобанов</span>
		</td>
		<td data-label="Имя"
			class="b-tableShort__cell b-tableShort__cell_value"
		>
			<span>Петр</span>
		</td>
		<td data-label="Отчество"
			class="b-tableShort__cell b-tableShort__cell_value"
		>
			<span>Богданович</span>
		</td>
	</tr>
	<!-- ... -->
</table>

Кнопки

Обычные

<div class="b-page__btnRow">
	<button class="b-btn b-btn_primary" type="button">Основная</button>
	<button class="b-btn b-btn_secondary" type="button">Второстепенная</button>
	<button class="b-btn b-btn_transparent" type="button">Прозрачная</button>
	<button class="b-btn b-btnLink" type="button">Ссылка</button>
</div>

Оформление

Заголовки

Заголовок 1 уровня <h1>

Заголовок 2 уровня <h2>

Заголовок 3 уровня <h3>

Заголовок 4 уровня <h4>

Заголовок 5 уровня <h5>

Заголовок 6 уровня <h6>

Списки

Маркированные <li>

Нумерованные <ol>

Вложенные

Смешанные

Список описаний <dl>, <dt> и <dd>

Код

Элементы текста

Таблицы

Таблица в пользовательском тексте

Адаптивные таблицы

Кнопки

Маркированные `<li>`

Нумерованные `<ol>`

Список описаний `<dl>`, `<dt>` и `<dd>`