Типографика

На странице представлены варианты текстовых блоков с унифицированными стилями для использования в основном содержании (статьи, кейсы и т.п.)

H1. Заголовок 1 уровня

Желательно использовать единожды как основной заголовок, тег дополнительных стилей не требует

H2. Заголовок 2 уровня

Используется для наименования секций страницы, разделов или статей

Такой же визуальный стиль можно применить к заголовку H1, добавив класс long-text

H3. Заголовок 3 уровня

Применяется для заголовков подсекций и дополнительных информационных вставок

Вопрос: в дизайн системе этот заголовок черный, но в примерах только синий...

H4. Заголовок 4 уровня

Резервный для заголовков подсекций и инфоблоков

blockquote

Выделенный блок описания/уточнения/цитаты. Визуально не менее 1/2 ширины контейнера.

Может содержать форматированное блоками содержание. В данном случае это заголовок (header) и параграфы (p).

Может быть самостоятельным блоком с текстовым содержанием. Имеет чуть отличный стиль.

При этом последовательно несколько подобных элементов нормально стыкуются.

1. Списки

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

2. Важно

   Надо использовать также заголовок (header) и параграф (p) внутри элемента списка

3. Если не использовать вложенные теги, оформление будет немного иным

Параграф текста.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptas unde ipsum cupiditate distinctio. Quos quis, deleniti esse suscipit doloremque illum eum optio rem quo magnam repellendus maxime totam laboriosam! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptas unde ipsum cupiditate distinctio. Quos quis, deleniti esse suscipit doloremque illum eum optio rem quo magnam repellendus maxime totam laboriosam!

1. Это нумерованный список
2. Это второй элемент списка
3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptas unde ipsum cupiditate distinctio. Quos quis, deleniti esse suscipit doloremque illum eum optio rem quo magnam repellendus maxime totam laboriosam!
• Это вложенный ненумерованный список
• Это второй элемент списка
1. OMG!
2. LOL
• Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptas unde ipsum cupiditate distinctio. Quos quis, deleniti esse suscipit doloremque illum eum optio rem quo magnam repellendus maxime totam laboriosam!
4. Это последний элемент списка

• Это ненумерованный список
• Это второй элемент списка
• Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptas unde ipsum cupiditate distinctio. Quos quis, deleniti esse suscipit doloremque illum eum optio rem quo magnam repellendus maxime totam laboriosam!
1. Это вложенный нумерованный список
2. Это второй элемент списка
• OMG!
• LOL
3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptas unde ipsum cupiditate distinctio. Quos quis, deleniti esse suscipit doloremque illum eum optio rem quo magnam repellendus maxime totam laboriosam!
• Это последний элемент списка