На главную

Разметка и символы

Заглушка с HTML-структурой

Не просто «рыба», а готовый кусок статьи: заголовки, списки, цитата, таблица и картинка — то, на чём и рассыпаются стили.

Что положить в заглушку

Настройки

Как это выглядит

Форма состояние ритм макетчик

Компонент тень форма шрифт форма анимация таблица список доступность сценарий цитата страница скругление правка. Тень лорем вёрстка анимация макетчик пропорция модуль. Макетчик компонент пользователь модуль страница цитата.

Оттенок заглушка форма
Вёрстка доступность контент колонка.

Тень дизайнер

Палитра сетка сценарий анимация шрифт интерфейс доступность цитата правка заглушка интерфейс. Список текст тень подпись иерархия версия страница состояние дизайнер. Анимация пропорция ссылка пропорция цитата анимация проверка задача акцент вёрстка правка дизайнер подпись подпись. Кегль оттенок подпись рыба редактор абзац список. кегль страница кегль.

Цитата ссылка форма

Пропорция кегль доступность пропорция фокус шрифт решение. Заголовок наведение заголовок наведение рыба заголовок отступ скругление сценарий тень наведение форма цитата.

Тень модуль кегль тень сетка

Вёрстка колонка разработчик пропорция состояние пропорция иерархия. Сетка ипсум дизайнер кегль задача интерлиньяж разработчик дизайнер заголовок. Фон решение блок страница таблица рамка фокус дизайнер макетчик. Структура колонка ритм макетчик текст заголовок рамка поле цитата.

Доступность решение иерархия колонка

Компонент подпись тень долор рамка ссылка разработчик страница разработчик форма доступность. Акцент компонент сетка разработчик рыба. Пользователь фон рамка редактор сетка подпись. Макет шрифт заглушка контраст наведение ипсум сценарий отступ.

  • Поле заголовок абзац контент.
  • Список колонка пропорция фокус пропорция структура.
  • Ипсум сетка отступ контент.
  • Версия таблица список кнопка отступ пропорция подпись форма.

Форма версия долор шрифт фон состояние контент состояние. Подпись версия цитата правка компонент.

— Дизайнер шрифт наведение
МодульНаведениеСкругление
Контент шрифт356Пропорция
Иерархия форма392Контраст состояние шрифт
Компонент540Анимация отступ

Разметка

<h1>Форма состояние ритм макетчик</h1>
<p>Компонент тень форма шрифт форма анимация таблица список доступность сценарий цитата страница скругление правка. Тень лорем вёрстка анимация макетчик пропорция модуль. Макетчик компонент пользователь модуль страница цитата.</p>
<figure>
  <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1200 630%22%3E%3Crect width%3D%221200%22 height%3D%22630%22 fill%3D%22%23e2e8f0%22%2F%3E%3Ctext x%3D%22600%22 y%3D%22330%22 text-anchor%3D%22middle%22 font-family%3D%22sans-serif%22 font-size%3D%2264%22 fill%3D%22%2394a3b8%22%3E1200 %C3%97 630%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Оттенок заглушка форма" width="1200" height="630">
  <figcaption>Вёрстка доступность контент колонка.</figcaption>
</figure>
<h2>Тень дизайнер</h2>
<p>Палитра сетка сценарий анимация шрифт интерфейс доступность цитата правка заглушка интерфейс. Список текст тень подпись иерархия версия страница состояние дизайнер. Анимация пропорция ссылка пропорция цитата анимация проверка задача акцент вёрстка правка дизайнер подпись подпись. Кегль оттенок подпись рыба редактор абзац список. <a href="#">кегль страница кегль</a>.</p>
<h3>Цитата ссылка форма</h3>
<p>Пропорция кегль доступность пропорция фокус шрифт решение. Заголовок наведение заголовок наведение рыба заголовок отступ скругление сценарий тень наведение форма цитата.</p>
<h2>Тень модуль кегль тень сетка</h2>
<p>Вёрстка колонка разработчик пропорция состояние пропорция иерархия. Сетка ипсум дизайнер кегль задача интерлиньяж разработчик дизайнер заголовок. Фон решение блок страница таблица рамка фокус дизайнер макетчик. Структура колонка ритм макетчик текст заголовок рамка поле цитата.</p>
<h2>Доступность решение иерархия колонка</h2>
<p>Компонент подпись тень долор рамка ссылка разработчик страница разработчик форма доступность. Акцент компонент сетка разработчик рыба. Пользователь фон рамка редактор сетка подпись. Макет шрифт заглушка контраст наведение ипсум сценарий отступ.</p>
<ul>
  <li>Поле заголовок абзац контент.</li>
  <li>Список колонка пропорция фокус пропорция структура.</li>
  <li>Ипсум сетка отступ контент.</li>
  <li>Версия таблица список кнопка отступ пропорция подпись форма.</li>
</ul>
<blockquote>
  <p>Форма версия долор шрифт фон состояние контент состояние. Подпись версия цитата правка компонент.</p>
  <footer>— Дизайнер шрифт наведение</footer>
</blockquote>
<table>
  <thead>
    <tr><th>Модуль</th><th>Наведение</th><th>Скругление</th></tr>
  </thead>
  <tbody>
    <tr><td>Контент шрифт</td><td>356</td><td>Пропорция</td></tr>
    <tr><td>Иерархия форма</td><td>392</td><td>Контраст состояние шрифт</td></tr>
    <tr><td>Компонент</td><td>540</td><td>Анимация отступ</td></tr>
  </tbody>
</table>

Почему не Math.random()

Текст детерминирован: одна и та же затравка даёт одинаковый результат на сервере и в браузере. Случайное число прямо в разметке рассинхронизировало бы гидратацию, и страница мигала бы при загрузке. Кнопка «Другой текст» меняет затравку по нажатию — уже после того, как страница ожила.