Helium поставляется с надежным набором типографских опций, которые вы можете использовать, чтобы воплотить свой контент в жизнь. На этой странице мы перечислим и приведем примеры многих вариантов типографики, которые вы можете использовать.

Варианты

Вариации-это классы, которые могут быть применены в строке, а также использованы в некоторых частицах через **Variations** или применены непосредственно к контенту как классы CSS.

Кнопки

Кнопки имеют ряд отличных вариаций на выбор. Вы должны отметить, что в разбивке HTML мы добавили класс button в дополнение к вариации, что является требованием для работы этих конкретных вариаций. Вы также можете комбинировать эти варианты.

Default Button   Button Bevel   Button Square

<a href="#" class="button">Default Button</a>
<a href="#" class="button button-bevel">Button Bevel</a>
<a href="#" class="button button-square">Button Square</a>

Button 2

<a href="#" class="button button-2">Button 2</a>

Button Outline

<a href="#" class="button button-outline">Button Outline</a>

Button Gradient

<a href="#" class="button button-gradient">Button Gradient</a>

Button Block

<a href="#" class="button button-block">Button Block</a>

Button XLarge

<a href="#" class="button button-xlarge">Button XLarge</a>

Button Large

<a href="#" class="button button-large">Button Large</a>

Button Small

<a href="#" class="button button-small">Button Small</a>

Button XSmall

<a href="#" class="button button-xsmall">Button XSmall</a>

Заголовки

Доступны все заголовки HTML <h1> - <h6> .

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Стили уведомлений

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

<p class="alert alert-success">…</p>

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

<p class="alert alert-info">…</p>

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

<p class="alert alert-warning">…</p>

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

<p class="alert alert-error">…</p>

Цитаты

Для цитирования блоков содержимого из другого источника в документе.

Цитаты по умолчанию

Оберните <blockquote> вокруг любого HTML в качестве цитаты. Для прямых цитат мы рекомендуем <p>.

Сборник народных советов и рекомендации на различные темы.

<blockquote>
<p>Сборник народных советов и рекомендации на различные темы.</p>
</blockquote>

Варианты цитат

Изменения стиля и содержания для простых вариантов стандартного блочного предложения.

Именование источника

Добавьте тег <small> для идентификации источника. Оберните имя исходной работы в <cite>.

Сборник народных советов и рекомендации на различные темы.

Кто-то известный в названии источника
<blockquote><p>Сборник народных советов и рекомендации на различные темы.</p><small>Кто-то известный <cite title="Название источника">Название источника</cite></small></blockquote>

Код

Встроенный

Обернуть встроенные фрагменты кода <code>.

Например, <section> должен быть обернут как inline.

Например, <code><section></code> должен быть обернут как inline.

Note: Убедитесь, что код находится в тегах <pre> как можно ближе к левому краю; он отобразит все вкладки.

 

Базовый блок

Используется <pre> для нескольких строк кода. Убедитесь, что в коде отсутствуют угловые скобки для правильного отображения.

<p>Пример текста здесь…</p>
<pre>&lt;p&gt;Пример текста здесь…&lt;/p&gt;</pre>

Таблицы

#ИмяФамилияЛогин
1 Иван Иванов Иван Иванов
2 Петр Петров Петр Петров
3 Сидор Сидоров Сидор Сидоров
<table class="table">…</table>