Урок 05. Примеры: текст в интерфейсе

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Пять примеров: иерархия, цитата, карточки одинаковой высоты, числа в таблице, ссылка с подчёркиванием.

1. Заголовочный блок страницы

Панель управления проектами и командами

Следите за задачами, отчётами и загрузкой команды в одном окне.

<header class="max-w-2xl">
  <h1 class="text-3xl font-semibold tracking-tight text-balance text-slate-900">
    Панель управления проектами и командами
  </h1>
  <p class="mt-3 text-base leading-relaxed text-slate-600">
    Следите за задачами, отчётами и загрузкой команды в одном окне.
  </p>
</header>

2. Цитата

Хорошая типографика незаметна: читатель просто понимает, что здесь главное.

— из учебника по вёрстке

<blockquote class="max-w-md border-l-4 border-slate-300 pl-4">
  <p class="text-lg leading-relaxed text-slate-800 italic">
    Хорошая типографика незаметна: читатель просто понимает, что здесь главное.
  </p>
  <footer class="mt-2 text-sm text-slate-500">— из учебника по вёрстке</footer>
</blockquote>

3. Карточки одинаковой высоты благодаря line-clamp

Короткое название

Описание в две строки, дальше многоточие. Даже если текст очень длинный, карточка не вырастет.

Очень длинное название карточки, которое точно не поместится

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

<div class="grid gap-4 sm:grid-cols-2">
  <article class="rounded-lg border border-slate-200 p-4">
    <h3 class="truncate text-sm font-semibold text-slate-900">Короткое название</h3>
    <p class="mt-1 line-clamp-2 text-sm text-slate-600">Описание в две строки, дальше многоточие. Даже если текст очень длинный, карточка не вырастет.</p>
  </article>
  <article class="rounded-lg border border-slate-200 p-4">
    <h3 class="truncate text-sm font-semibold text-slate-900">Очень длинное название карточки, которое точно не поместится</h3>
    <p class="mt-1 line-clamp-2 text-sm text-slate-600">Второе описание тоже обрезается ровно по двум строкам, поэтому обе карточки в ряду одинаковой высоты.</p>
  </article>
</div>

4. Числа в таблице

tabular-nums делает цифры одинаковой ширины, а text-right выравнивает разряды.

Месяц	Сумма
Июнь	1 240,00
Июль	18 903,50
Август	7 010,25

<table class="w-full max-w-sm text-sm">
  <thead>
    <tr class="border-b border-slate-200 text-xs text-slate-500">
      <th class="py-2 text-left font-medium">Месяц</th>
      <th class="py-2 text-right font-medium">Сумма</th>
    </tr>
  </thead>
  <tbody class="text-slate-700">
    <tr class="border-b border-slate-100"><td class="py-2">Июнь</td><td class="py-2 text-right tabular-nums">1 240,00</td></tr>
    <tr class="border-b border-slate-100"><td class="py-2">Июль</td><td class="py-2 text-right tabular-nums">18 903,50</td></tr>
    <tr><td class="py-2">Август</td><td class="py-2 text-right tabular-nums">7 010,25</td></tr>
  </tbody>
</table>

5. Ссылка, которую видно

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

<p class="max-w-md text-sm text-slate-700">
  Подробности — в
  <a class="font-medium text-sky-700 underline decoration-sky-300 decoration-2 underline-offset-4 hover:decoration-sky-600" href="#">официальной документации</a>,
  раздел о типографике.
</p>

6. Надзаголовок капсом

Новое

Экспорт отчётов в CSV

<div>
  <p class="text-xs font-semibold uppercase tracking-widest text-emerald-700">Новое</p>
  <h3 class="mt-1 text-xl font-semibold tracking-tight text-slate-900">Экспорт отчётов в CSV</h3>
</div>