Текст и типографика
Этот блок имитирует обычную статью: короткие и длинные предложения, выделения, курсив и ссылки внутри страницы. Типографика рассчитана на комфортное чтение: межстрочный интервал около 1.6, ограниченная ширина колонки, мягкий контраст.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
«Хороший тестовый макет не кричит о себе: он даёт глазу отдых и позволяет сосредоточиться на содержании.»
— условный автор цитаты
Ниже — нумерованный список с вложенностью и маркированный список, чтобы проверить отступы и маркеры в разных браузерах.
- Первый пункт: введение и постановка задачи.
-
Второй пункт с подпунктами:
- подпункт A — короткий;
- подпункт B — чуть длиннее, с пояснением про переносы строк и выравнивание;
- подпункт C — финальный штрих.
- Третий пункт: выводы и дальнейшие шаги.
Встроенные и файловые SVG
Иконки и иллюстрации в векторе масштабируются без потери чёткости — удобно для ретины и печати.
badge.svg
Изображения разных размеров
Файлы лежат в public/media/images/ и после сборки копируются в dist/media/images/ —
всё отдаётся с того же хоста, что и страница.
Видео
Видео и постеры — локальные файлы в public/media/videos/ и public/media/images/.
Аудио
Два MP3 из public/media/audio/: длинная композиция и короткий фрагмент.
Ещё текст для объёма
Иногда нужно проверить, как страница ведёт себя при большом количестве подряд идущих абзацев. Здесь три абзаца подряд с разной длиной строк — удобно оценить ритм и «цвет» полосы.
В русской типографике принято использовать кавычки-ёлочки, длинное тире и неразрывные пробелы там, где это уместно. В вебе часть правил упрощают, но базовая читабельность остаётся приоритетом: не делайте строки слишком длинными и не сжимайте межстрочный интервал до «газетного» вида.
English paragraph for mix: The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Sphinx of black quartz, judge my vow. These pangrams help test font rendering and letter-spacing without relying on Lorem Ipsum alone.
// Пример блока кода
function greet(name) {
return `Hello, ${name}`;
}
console.log(greet('test'));