Редактировать материал

СОХРАНИ ВАЖНОЕ

Название

Направление Формат Статус

Коротко о главном

Markdown: ## заголовок · **жирный** · списки · код

## Результат

Вы соберёте компактную типографическую систему для учебной страницы: основной текст, два уровня заголовков, подписи, список шагов и карточку следующего действия. Хорошая сетка не обязана быть заметной. Её задача — помогать глазу быстро находить начало, объяснение, упражнение и проверку.

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

## Шаги

1. Определите одно основное чтение: статья, каталог или дашборд. Для статьи ограничьте длину строки, чтобы абзац не растягивался во всю ширину окна.
2. Назначьте роли текста: большой заголовок страницы, заголовок раздела, основной текст, подпись и кнопка. Одна роль должна иметь один повторяемый стиль.
3. Задайте вертикальный ритм: больше пространства перед новым разделом, меньше — между связанными строками. Не используйте отступ как случайный декоративный эффект.
4. В сетке карточек выровняйте заголовки, метки и действия по общим краям. При сужении экрана сначала уменьшайте число колонок, а не размер текста до нечитаемого.
5. Проверьте экран без изображений и анимаций: порядок всё ещё должен быть очевиден.

## Мини-проверка CSS

```css
.lesson-copy { max-width: 68ch; }
.lesson-copy > * + * { margin-block-start: 1rem; }
.lesson-copy h2 { margin-block-start: 2.5rem; }
```

Проверьте также длинные слова, ссылки и русские заголовки: они чаще выявляют слабое место сетки, чем идеальный демонстрационный текст.

## Критерий проверки

Человек может быстро найти цель, шаги и следующее действие; на телефоне нет горизонтальной прокрутки, а текст не превращается в плотную стену.

### Источник

- [Components — shadcn/ui](https://ui.shadcn.com/docs/components)

Следующий шаг Ссылка на источникСама ссылка требует интернета. Важное содержание сохраните в тексте или вложении.

Изображения, GIF, видео и PDF

До 6 файлов за одно сохранение, до 100 МБ каждый. Файлы сохраняются на компьютере.

Сохранение по кнопкеОтмена