Оформление

Заголовки

Заголовок 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>

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

Вложенные

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Смешанные

  1. Coffee
  2. Tea
    • Black tea
    • Green tea
  3. 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 0123 <sub>
  • superscript: I need a good superman joke to go here. 0123 <sup>
  • time: <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>

Хотите получить скидку?

Напишите нам об интересующих вас товарах или услугах и мы рассчитаем вашу персональную скидку!